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

Question

我有一张响应式图片：

<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，但新图像不一样，它不再响应。

Answer 1

要使背景图像缩放 div，您需要设置 background-size 属性。

.slice {
    background-size: cover;
}

您可以使用任何 CSS 尺寸单位（50px、3em、50% 等）以及 auto、cover 和 contain。您需要尝试各种设置，看看是否可以使它们匹配。 cover 将确保背景图像填满整个容器并裁剪任何溢出部分。 contain 将确保背景图像始终适合容器和信箱。

最后，如果您需要 div 以特定的 width-to-height 比例缩放，您可以使用 "percentage padding" 技巧。

.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 将一个块注入到 div 中来实现的，该块的 padding-top 为 50%。垂直百分比填充始终是宽度的百分比，因此因为该伪元素是 100% 宽，所以 50% 会将垂直填充设置为宽度的一半。因此，随着宽度的增加和缩小，该伪元素上的垂直填充也会增加和缩小。

Answer 2

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

只要两个图像的大小相等并且您将外部 <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>

Answer 3

我找到了一个灵感来自@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() 函数动态设置，例如（不要忘记删除 background-image 来自 .s1 和 .s2 在 css 文件中）：

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

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

How to split an image responsive into two div blocks using css?

html

css

responsive-design

responsive