html - 如何让图像填满整个容器？

Question

我想让图像始终填充宽度和高度。

我正在使用 LayerSlider WP 插件，所以我在其设置中将宽度设置为 100%，并将 width: 100% !important 设置到一个显示“custom css”的字段中

PS:这是链接http://www.draidel.com.ar/novedades (你会看到我在第一张幻灯片中添加了一个非常小的方形图像，在第二张幻灯片中添加了一个更宽的图像，但仍然没有填满整个宽度)

谢谢!

Answer 1

您需要将 img 的 min-height 和 min-width 设置为 100%。但是，您还需要将其 height 和 width 设置为 auto 以保持其纵横比，无论屏幕大小或方向。如果您还想在 img 的高度或宽度超过其父级时将其居中，则需要使用 position:absolute 设置其 left 和 top 位置到 50%，然后使用 translate transform 函数将它们再次拉回 50%。这是一个例子:

*{box-sizing:border-box;margin:0;padding:0;}
figure{
  bottom:0;
  left:0;
  position:fixed;
  right:0;
  top:0;
}
img{
  display:block;
  height:auto;
  min-height:100%;
  left:50%;
  position:absolute;
  top:50%;
  transform:translate(-50%,-50%);
  width:auto;
  min-width:100%;
}

<figure><img src="http://draidel.com.ar/wp-content/uploads/2016/01/website-647013_1280.jpg"></figure>