如何使用 css 将响应式图像拆分为两个 div 块？答案

【问题标题】：How to split an image responsive into two div blocks using css?如何使用 css 将响应式图像拆分为两个 div 块？
【发布时间】：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 是的，没错！
您能否举例说明您为什么需要这样做？为什么要将图像分割成碎片？
以制作动画为例，每个切片的动画都不同。

标签： html css responsive-design responsive

【解决方案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 */
}

&lt;div class="keep-ratio"&gt;&lt;/div&gt;

这通过让伪元素::before 将一个块注入到具有padding-top 的50% 的div 中来工作。垂直百分比填充始终是宽度的百分比，因此因为该伪元素是 100% 宽，50% 会将垂直填充设置为宽度的一半。因此，随着宽度的增加和缩小，该伪元素上的垂直填充也会增加。

【讨论】：

请用您的 CSS 为这些元素更新您的原始问题。
img-responsive 是响应式图像的 Bootstrap 类。 slice,s1 和 s2 是我要找的。span>