[英]How can I make the image fill the whole container?
I want to make the image always fill width and height. 我想使图像始终填充宽度和高度。
I am using LayerSlider WP plugin so I set width 100% at its settings and also width: 100% !important
into a field that says "custom css" 我使用的是LayerSlider WP插件,因此我在其设置中将width设置为100%,还将
width: 100% !important
设置为width: 100% !important
字段,该字段显示“ custom css”
PS: This is the link http://www.draidel.com.ar/novedades (you will see I added a very small and squared image in the first slide and a wider image for the second one but still doesnt fill the full width) PS:这是链接http://www.draidel.com.ar/novedades (您会看到我在第一张幻灯片中添加了一个非常小的正方形图像,在第二张幻灯片中添加了一个较宽的图像,但仍未填充整个宽度)
Thanks ! 谢谢 !
You'll need to set the min-height
and min-width
of your img
to be 100%. 您需要将
img
的min-height
和min-width
设置为100%。 But, you'll also need to set its height
and width
to auto
in order to preserve its aspect ratio, no matter the screen size or orientation. 但是,无论屏幕大小或方向如何,您都需要将其
height
和width
设置为auto
以保持其纵横比。 If you also want to centre the img
in its parent if its height or width exceed those of its parent, then you'll need to use position:absolute
to set its left
and top
positions to 50% and then use the translate
transform
function to pull them back by 50% again. 如果您还想在其高度或宽度超过其父对象的位置将
img
置于其父对象的居中position:absolute
,则需要使用position:absolute
将其left
和top
位置设置为50%,然后使用translate
transform
函数将其设置为再拉回50% Here's an example: 这是一个例子:
*{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>
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.