How to resize image in div to cover?

Question

Ok, I guess you've heard this one before... I tried to find a solution, but can't find one. I have a container that covers the left 50% of a screen. Inside the container I want an image to cover the space, and not to strech. Css at this moment is:

height: auto;
max-width: 100%;

Please help!!!

Answer 1

• If you have an image larger than the space you want it to cover and you use an img tag to do that, add this to your css:

img {width: auto; height: auto;}

• If, instead, you use a div to place the image as a background-image, use this:

div {
    background-image: url("yourimage.png");
    background-repeat: no-repeat;
    background-size: contain;
}

Answer 2

You can use it as a background and use the following properties:

background-repeat: no-repeat;
background-position: center center;
background-size: cover;

https://jsfiddle.net/alexndreazevedo/upn7jwfs/

Answer 3

add img inside your div and set width and height for image in 100%;

<div> <img src=""/> </div>

css

img {
width: 100%;
height: 100%;
}