我想让图像始终填充宽度和高度。
我正在使用 LayerSlider WP 插件,所以我在其设置中将宽度设置为 100%,并将 width: 100% !important
设置到一个显示“custom css”的字段中
PS:这是链接http://www.draidel.com.ar/novedades (你会看到我在第一张幻灯片中添加了一个非常小的方形图像,在第二张幻灯片中添加了一个更宽的图像,但仍然没有填满整个宽度)
谢谢!
最佳答案
您需要将 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>
关于html - 如何让图像填满整个容器?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/36894608/