如何使图像充满整个容器？

Question

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

我使用的是LayerSlider WP插件，因此我在其设置中将width设置为100％，还将width: 100% !important设置为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 ，则需要使用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> 

Answer 2

您是否在样式表文件上尝试过此操作？

img.ls-preloaded{
width:100%!important;
}