Question

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

感谢您的帮助。

乔

Answer 1

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

Answer 2

如果width : 100%

，则position : absolute与display : block一起使用

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

解决这个问题的两种方法：

让一个img不是绝对定位的。它的尺寸将是父div的尺寸
使用带有position : relative的透明img，其尺寸与真实的img相同：它非常脏，但它会设置父div尺寸。

只有当你的imgs尺寸相同时，这些才有效。否则，您必须使用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>

Answer 4

你能把它们放在一堆div中吗？

堆叠图像CSS

4 个答案: