如何使用 css 将响应式图像拆分为两个 div 块？
Posted
技术标签:
【中文标题】如何使用 css 将响应式图像拆分为两个 div 块？【英文标题】：How to split an image responsive into two div blocks using css? 【发布时间】：2017-06-30 19:55:28 【问题描述】：我有一张响应式图片：
<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，但新图像不一样，它不再响应。
【问题讨论】：
你是说你有一个图像，你想在两个 div 之间分割，这样它看起来仍然只是一个图像？ @dargue3 是的，没错！ 您能否举例说明您为什么需要这样做？为什么要将图像分割成碎片？ 以制作动画为例，每个切片的动画都不同。 【参考方案1】：这是一个很酷且可行的问题。
只要两个图像的大小相等，并且您将外部 <div> 设置为图像的宽度，并且只要您不弄乱动画中的宽度，您对内部所做的任何更改图像将反映在图像的左侧，您对外部图像所做的任何更改都将反映在图像的右侧。
#image
position: relative;
width: 200px;
#half-image
position: absolute;
top: 0;
left: 0;
width: 50%;
overflow: hidden;
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/>
<div id="image">
<img src='https://placehold.it/200x200' id='outer' class='img-responsive'>
<div id = "half-image">
<img src='https://placehold.it/200/e8117f' id = 'inner'>
</div>
</div>【讨论】：
这很酷，谢谢，但尺寸是静态的（#image width），我找到了一个完美的解决方案，灵感来自您，请参阅上面的答案。【参考方案2】：我从@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>注意
css background-image 属性将使用jQuery .css() 函数动态设置（不要忘记从.s1 和css 中的.s2 中删除background-image文件）：
$( document ).ready(function()
var imageSrc = $('.sliced-img').children( 'img' ).attr( 'src' );
$('.sliced-img').css("background-image","url('"+imageSrc+"')");
);
【讨论】：
【参考方案3】：要使背景图像按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 将一个块注入到具有padding-top 的50% 的div 中来工作。垂直百分比填充始终是宽度的百分比，因此因为该伪元素是 100% 宽，50% 会将垂直填充设置为宽度的一半。因此，随着宽度的增加和缩小，该伪元素上的垂直填充也会增加。
【讨论】：
请用您的 CSS 为这些元素更新您的原始问题。 img-responsive 是响应式图像的 Bootstrap 类。 slice,s1 和 s2 是我要找的。span>以上是关于如何使用 css 将响应式图像拆分为两个 div 块？的主要内容，如果未能解决你的问题，请参考以下文章