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

Question

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

4

我有一张响应式的图片：

<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来实现这个呢？

我尝试设置两个

的background-image和background-position，但新图像不同，它不再是响应式的。

- Rached Anis

你是说你有一张图片想要在两个div之间分割，使其看起来仍然像一张单独的图片？ - dargue3

@dargue3 是的，完全正确！ - Rached Anis

你能提供一个需要这样做的例子吗？为什么要将图片分成几部分？ - Soviut

例如，制作动画时，每个切片的动画效果都不同。 - Rached Anis

3个回答

1

我找到了一个灵感来自@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>

注意

使用jQuery的.css()函数动态设置css的background-image属性，例如（不要忘记从css文件中的.s1和.s2中删除background-image）：

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

- Rached Anis

0

为了让背景图片随着 div 的大小进行缩放，您需要设置 background-size 属性。

.slice {
    background-size: cover;
}

您可以使用任何 CSS 大小单位（例如`50px`、`3em`、`50%`等），以及 `auto`、`cover` 和 `contain`。您需要尝试各种设置来查看它们是否匹配。`cover` 将确保背景图像填充整个容器，并裁剪任何溢出部分。`contain` 将确保背景图像始终适合容器并添加黑边（letterbox）。

最后，如果您需要使 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%的块注入到

中来实现的。垂直百分比填充始终是宽度的百分比，因此因为该伪元素是100%宽，50%将把垂直填充设置为宽度的一半。因此，随着宽度的增长和缩小，该伪元素上的垂直填充也会发生变化。

- Soviut

请在原问题中更新您的CSS，以涵盖这些元素。 - Soviut

img-responsive是Bootstrap用于响应式图片的类。slice、s1和s2是我正在寻找的。 - Rached Anis

网页内容由stack overflow 提供, 点击上面的

可以查看英文原文，
原文链接

- wlh · Accepted Answer

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

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