CODEWITHSUNDEEP
htmlcss
Elden Theaker
Elden Theaker

Reputation: 25

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

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

I 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">
    <div>
      <img class="center-img" src="images/image.jpg">
    </div>
</div>

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

How can I scale the height of the container, as it does not leave room for the image inside?

Upvotes: 0

Views: 55

Answers (2)

Relisora
Relisora

Reputation: 1183

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.

.img {
    position:relative;
    height:100vh;
  width:93vw;
  border: 1px solid red;
}

.all-box-slideshow {
    padding: 5px 5px;
  border:1px solid green;
}
<div class="all-box-slideshow">
    <div class="img">      
    </div>
</div>

Upvotes: 1

Lucas Watson
Lucas Watson

Reputation: 803

This will force the image to fill the parent container completely, and will scale accordingly. 

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

.all-box-slideshow {
	padding: 5px 5px;
	width: 98.3%;
	height: auto;
}
<div class="all-box-slideshow">
    <div>
      <img class="center-img" src="http://placehold.it/350x150">
    </div>
</div>

Upvotes: 0

Related Questions