Replicate background-size: cover for a div with content in CSS

1
votes

If you have a div of any size you can set it to have a background image, and then you can give that image the background-size attribute of 'cover'. This maintains the aspect ratio of the image, but sets its size so it covers the div, either fitting to the width or height, whichever is proportionally less.

background-image: ...
background-position: center;
background-size: cover;

Is there a way, in pure CSS, that I can achieve the same thing but using a div as a frame, and a content div that sits inside it and scales - maintaining it's aspect - to fill the frame div area?

So the div would need to take the full width of the div, and then be centred vertically and horizontally inside the parent which have overflow: hidden on.

Thanks, H

1
css
No, you will need to do that with Javascript. – maja
Dude a bit of a clearer explanation for the last two paragraphs, maybe with graphics/drawings would be really appreciated. – Mohd Abdul Mujib

1 Answers

0
votes

You dont need a second div - just add a class to the image that scales to fit the width of the containing div:

HTML

<div id="img_wrap"> 
    <img src="your-image.jpg" class="fullscreen_width" />
</div>

CSS

#img_wrap  {  
    width: 70%; /* add value in px, % etc */
    border: 2px solid red;
}
.fullscreen_width {
    width: 100%;
    height: auto;
}