How can I make the image fill the whole container?

Question

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"

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)

Thanks !

Answer 1

You'll need to set the min-height and min-width of your img to be 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. 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. 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> 

Answer 2

Did you tried this on stylesheet file?

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