How to make image fit to its div CSS - html

Question

Let's suppose I have the following code:
img {
max-widht: 100%;
max-height: 100%;
}
<div width="500" height="500">
<img src="https://placehold.it/250x150">
</div>
This works fine for all images if with width or height higher than 500px.
But with smaller images, the image will not cover the div.
Is there a CSS way to force the image to be a least width: 100% or height: 100% regardless its original size ?
EDIT :
This solution by disinfor worked for me.
img {
width: 100%;
height: 100%;
object-fit: contain;
}

Answer 1

Do this:
img {
width: 100%;
height: auto;
}
The reason smaller images (in your case, smaller than 500px wide) don't fill the whole space, is because max-width means "max width of the actual image." So if you use width: 100% instead, the image will fill the space of its container.
Using height: auto will ensure the image doesn't get stretched/distort vertically.
Proof of concept:
.normal, .land, .port, .fit {
height: 200px;
width: 200px;
}
img {
width: 100%;
height: auto;
}
div.land img,
div.port img {
width: 100%;
height: 100%;
}
div.fit img {
width: 100%;
height: 100%;
object-fit: cover;
}
<div class="fit">
<img src="https://placehold.it/500x750">
</div>
<div class="fit">
<img src="https://placehold.it/50x100">
</div>
<div class="normal">
<img src="https://placehold.it/75x10">
</div>
<div class="normal">
<img src="https://placehold.it/10x75">
</div>
<div class="land">
<img src="https://placehold.it/75x10">
</div>
<div class="port">
<img src="https://placehold.it/10x75">
</div>

Answer 2

img {
max-width: 100%;
object-fit: cover;
}
<div width="500" height="500">
<img src="https://placehold.it/250/150">
</div>

Answer 3

I think that you answered to your own question!
You have a Div! => width:500px and height: 500px!
when an image is larger than this size, Max-width and max-height can work correctly!
but when your image is smaller, max-width can't help you, because image width is smaller than 500px!
for example you have an Image => width:300px. max-width:100% is equal to 300px!
then you can change your code like this:
<div>
<img src="#" alt="Alternate Text" style="width:500px;height:500px;" />
</div>
but if you want a responsive Image:
<div style="width:500px;height:500px;">
<img src="#" alt="Alternate Text" style="width:500px;height:auto;" />
</div>

Answer 4

You can use background-size CSS rule if you put your image to background:
css
.block {
background: url(my_picture.png) no-repeat 50% 50%;
background-size: cover;
}
html
<div width="500" height="500" class="block"></div>