CODEWITHSUNDEEP
htmlcsswordpress
Ariel
Ariel

Reputation: 547

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"

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 !

Upvotes: 0

Views: 4152

Answers (2)

Shaggy
Shaggy

Reputation: 6796

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>

Upvotes: 1

Mira
Mira

Reputation: 563

Did you tried this on stylesheet file?

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

enter image description here

Upvotes: 0

Related Questions