Stretch Image to Fit 100% of Div Height and Width - html

Question

I have a div with the following CSS
#mydiv{
top: 50px;
left: 50px;
width: 200px;
height: 200px;
}
and my HTML looks like this
<div id = "mydiv">
<img src = "folder/file.jpg" width = "200px" height = "200px">
</div>
I'd like my web image to always be the same size (in a 1:1 aspect ration) no matter what the resolution of the actual image is. If my actual image files are square (with 1:1 ratio) then this isn't a problem. But if the actual image files are not square then the displayed web image do stretch to 100% of both the div's height and width (in this case 200px).
How do I get different image sizes to fit to my DIV?

Answer 1

You're mixing notations. It should be:
<img src="folder/file.jpg" width="200" height="200">
(note, no px). Or:
<img src="folder/file.jpg" style="width: 200px; height: 200px;">
(using the style attribute) The style attribute could be replaced with the following CSS:
#mydiv img {
width: 200px;
height: 200px;
}
or
#mydiv img {
width: 100%;
height: 100%;
}

Answer 2

Instead of setting absolute widths and heights, you can use percentages:
#mydiv img {
height: 100%;
width: 100%;
}

Answer 3

Or you can put in the CSS,
<style>
div#img {
background-image: url(“file.png");
color:yellow (this part doesn't matter;
height:100%;
width:100%;
}
</style>

Answer 4

will the height attribute stretch the image beyond its native resolution? If I have a image with a height of say 420 pixels, I can't get css to stretch the image beyond the native resolution to fill the height of the viewport.
I am getting pretty close results with:
.rightdiv img {
max-width: 25vw;
min-height: 100vh;
}
the 100vh is getting pretty close, with just a few pixels left over at the bottom for some reason.