Elden Theaker Elden Theaker - 8 months ago 34
CSS Question

How do I scale a container for the image contents inside?

I have an image inside of a container that scale correctly depending on the size on the screen. The issue I am having is that the container will not scale with it height wise.

I would want the image to fill the container completely and keep in the same aspect ratio of the image.

This is what I have got so far:

.center-img {
image-orientation: from-image;
position: absolute;
margin: auto;
top: 0px;
right: 0px;
bottom: 0px;
left: 0px;
width: 98%;
height: auto;

.all-box-slideshow {
padding: 5px 5px;
width: 98.3%;
height: auto;

<div class="all-box-slideshow">
<img class="center-img" src="images/image.jpg">

Using the "center-image" class on the image makes the image scale to the screen size through a percentage.

What I can't figure out is how to scale the height of the container as it does not leave room for the image inside.

Thanks in advanced.


I cleaned your css and changed your img into a div with red border so we can see it. I made the container with green color to see it too.

The point here was to give your img a relative position so the div around it will adapt.

JS fiddle here for example