css - 堆叠图像 CSS

Question

我知道将图像堆叠在一起很容易，但我只是想知道这是否可以实现但保持流畅的图像？一旦我使用了 position 属性，我就必须提供一个宽度。然后图像不会使用浏览器重新调整大小。

谢谢你的帮助。

乔

Answer 1

你当然可以使用width: 100%;. display: block;此外，如果您只是在 img 元素上指定，则不需要将它们放在 div中。您可能必须指定max-width，但这取决于您的特定应用程序和所需的浏览器支持。

Answer 2

Awidth : 100%与position : absoluteif一起使用display : block

您的问题很可能是您的 div 中只有绝对定位 img ，因此它的尺寸为空（因为定位规则。）

解决此问题的两种方法：

• 使一个 img 没有绝对定位。它的尺寸将是父 div 的尺寸

• 使用透明的 img, with position : relative, 与你的真实 imgs 具有相同的尺寸：它很脏，但它会设置父 div 尺寸。

仅当您的 img 尺寸相同时，这些才有效。否则，您必须使用 JS 解决方案。

Answer 3

将照片作为空白<img>或<div>类似的东西的背景

.container {
  position: relative;
  height: 400px;
  width: 100%;
}

.container > div {
   position: absolute;
   top: 0;
   left: 0;
   height: 100%;
   width: 100%;
}

<div class="container">

   <div style="background: url('myimage1.jpg');"><!-- nothing --></div>
   <div style="background: url('myimage2.jpg');"><!-- nothing --></div>
   <div style="background: url('myimage3.jpg');"><!-- nothing --></div>

</div>