如何使用css将图像响应分成两个div块？

我有一个形象，这是响应：如何使用css将图像响应分成两个div块？

<img class="img-responsive" src="img/image.jpg"/>

我想把它分成两个div：

<div class="slice s1"></div> 
<div class="slice s2"></div>

或：

<div class="slice s1"> 
    <div class="slice s2"></div> 
</div>

我如何能做到动态或使用CSS？

我试图做到这两个div设置background-image和background-position，但新的图像是不一样的，它不再响应。

来源

2017-02-12 Rached Anis

你说你有一个你想要在两个div之间分割的图像，使它看起来像只是一个单一的图像？ – dargue3

@ dargue3是的，确切的！ –

你能举一个你为什么需要这样做的例子吗？为什么把图像分成几块？ – Soviut

我发现从@wlh的回答启发的解决方案：

.img-responsive{ 
 
    width: 100%; 
 
    max-width: 100%; 
 
    height: auto; 
 
} 
 
.hidden { 
 
    visibility:hidden; 
 
} 
 
.sliced-img { 
 
    position: relative; 
 
    width: 100%; 
 
} 
 
.slice { 
 
    position: absolute; 
 
    top: 0; 
 
    width: 50%; 
 
    height: 100%; 
 
    background-size: cover; 
 
} 
 

 
.s1 { 
 
    left: 0; 
 
    background-image: url('https://placehold.it/200/0e0e0e'); /* black */ 
 
    background-position: 0%; 
 
} 
 

 
.s2 { 
 
    left: 50%; 
 
    background-image: url('https://placehold.it/200/e8117f'); /* pink */ 
 
    background-position: -100%; 
 
}

<!DOCTYPE html> 
 
<html> 
 
    <head> 
 
    <meta charset="utf-8"> 
 
    <title></title> 
 
    <link href="style.css" rel="stylesheet"/> 
 
    </head> 
 
    <body> 
 
    <div class="sliced-img"> 
 
    <img src='https://placehold.it/200x200' class='img-responsive hidden'> <!-- This hidden image (image we want to slice) is under the two divs, it's just used to get the image height and/or the image src dynamically --> 
 
    <div class="slice s1"></div> 
 
    <div class="slice s2"> </div> 
 
    </div> 
 
</body> 
 
</html>

注意

的cssbackground-image属性将动态使用例如jQuery.css()功能设置（不要忘了删除.s1和.s2的background-image在css文件）：

$(document).ready(function() { 
    var imageSrc = $('.sliced-img').children('img').attr('src'); 
    $('.sliced-img').css("background-image","url('"+imageSrc+"')"); 
});

来源

2017-02-13 21:14:18

要制作尺寸为div的背景图像比例尺，您需要设置background-size属性。

.slice { 
    background-size: cover; 
}

你可以使用任何CSS大小单位（50px，3em，50%等）以及auto，cover和contain。你需要玩各种各样的设置，看看你是否能让它们匹配。 cover将确保背景图像填充整个容器并将裁剪任何溢出。 contain将确保背景图像始终适合容器内，并将信箱。

最后，如果您需要div以特定的宽高比进行缩放，则可以使用“百分比填充”技巧。

.keep-ratio { 
 
    background: cornflowerblue; 
 
    width: 100%; 
 
} 
 

 
.keep-ratio::before { 
 
    content: ''; 
 
    display: block; 
 
    padding-top: 50%; /* 0.5 ratio, half the width */ 
 
}

<div class="keep-ratio"></div>

这通过具有伪元件::before注入块划分成其具有一个50%padding-top在div。垂直百分比填充始终是宽度的百分比，因为该伪元素宽度为100％，所以50％会将垂直填充设置为宽度的一半。因此，随着宽度的增加和缩小，伪元素上的垂直填充也随之增加。

来源

2017-02-12 22:06:32 Soviut

我试过了，但仍然没有帮助.. –

请更新您的原始问题与您的CSS的那些元素。 – Soviut

img-responsive是响应式图像的Bootstrap类。切片，s1和s2是我正在寻找的。 –

这是一个很酷的问题和可行的。

只要两张图像的大小相同，并且您将外部<div>设置为图像的宽度，并且只要不篡改动画中的宽度，您对内部图像所做的任何更改会反映在图像的左侧，并且您对外部图像所做的任何更改都会反映在图像的右侧。

#image { 
 
    position: relative; 
 
\t width: 200px; 
 
    \t } 
 

 
    \t #half-image { 
 
    \t \t position: absolute; 
 
    \t \t top: 0; 
 
    \t \t left: 0; 
 
    \t \t width: 50%; 
 
    \t \t overflow: hidden; 
 
    \t }

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/> 
 
<div id="image"> 
 
\t <img src='https://placehold.it/200x200' id='outer' class='img-responsive'> 
 
\t <div id = "half-image"> 
 
\t \t <img src='https://placehold.it/200/e8117f' id = 'inner'> 
 
\t </div> 
 
</div>

来源

2017-02-13 01:39:32 wlh

这是很酷的人，谢谢，但尺寸是静态的（＃图片宽度），我发现一个完美的解决方案，从你的启发，请参阅上面的答案。 –

如何使用css将图像响应分成两个div块？

回答

相关问题