displaying an image as big as possible - css

Question

How can I scale up a image as much as possible without changing the picture ratio. So its either 100% width or 100% height
<div class="container"><img src=""></div>

Answer 1

You can use CSS background which is recommended in this case. You can read more about CSS backgrounds here.
div {
width: 200px;
height: 200px;
border: 1px solid red;
background: url(https://picsum.photos/200) center/cover no-repeat;
}
<div></div>
You can use the image tag (as you did) and set the width & height property to 100%.
div {
width: 200px;
height: 200px;
border: 1px solid red;
}
img {
width: 100%;
height: 100%;
}
<div>
<img src="https://picsum.photos/200/300" />
</div>
P.S.: You can set the height to auto so the image becomes responsive.

Answer 2

img{
object-fit: contain;
}
use this for the image.

Answer 3

You can use object-fit: cover, the image will be sized to maintain its aspect ratio while filling the element’s entire content box
.img {
width: 100%;
height: 100%;
object-fit: cover;
}
<link href="https://cdnjs.cloudflare.com/ajax/libs/meyer-reset/2.0/reset.min.css" rel="stylesheet"/>
<div>
<image
src="https://hips.hearstapps.com/hmg-prod.s3.amazonaws.com/images/close-up-of-cat-wearing-sunglasses-while-sitting-royalty-free-image-1571755145.jpg"
alt="test"
class="img"
/>
</div>

Answer 4

Just use object-fit: contain; for the image
.image-container {
width: 300px;
height: 300px;
border: 3px solid black;
padding: 15px;
}
.image-container img {
width: 100%;
height: 100%;
object-fit: contain;
}
<div class="image-container" style="height: 500px;">
<img src="https://www.w3schools.com/html/pic_trulli.jpg" alt="">
</div>
<div class="image-container" style="width: 500px;">
<img src="https://www.w3schools.com/html/img_girl.jpg" alt="">
</div>