Stretch Image to Fit 100% of Div Height and Width

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>