How can I make an image fit inside a div element when the image is wider than the div?

I've an image tag inside a div element.

<div id = "myDiv">
 <img alt = "myImage" src = "some_source"/>
</div>

The image is bigger than the div, so the image is not inside the div element. First, I've thought about using width = x, height = y. But as I'm still designing the page, I fear to have to worry all the time those 2 dimensions.

How c开发者_Go百科an I keep the image inside the div element? also, respecting the dimensions of the div element?

Thanks for helping

From here: Three ways to resize images to fit a DIV

Using the STYLE attribute within the IMG tag to manually set the width or height for each image (essentially the same as #1).

<div id="img_box">
<img style="width: 100%;" src="path/to/horizontal_image.jpg" />
</div>
<div id="img_box">
<img style="height: 100%;" src="path/to/vertical_image.jpg" />
</div>

Hope it solves your problem.

Edit: Best solution is to actually resize the image with server-side script. Scaling images in the browser does not usually work out very well.

Edit2: http://unstoppablerobotninja.com/entry/fluid-images

This worked for me .

 .myimg {width:200px; height:auto;}

Automatically re-sizes images in all browsers .

Guys after spending too much time looking around for an easier way to do this, I combine the info from research to do it like this: (simply using the getimagesize() function -if the height is larger than the width, echo an image tag with a style having a height of 100% else echo the same image tag but with a style having a width of 100%);

$image = "path to your image";
$img_size = getimagesize($image);

if ($img_size[0] < $img_size[1]){echo " < img src= '$image'  style='height:100%;'>";}
else {echo "< img src= '$image'  style='width:100%;'>";}

Since this post is from a while ago, I figure I'd update it with a more modern way of doing this that requires no JS.

I'd recommend using the CSS properties background-size:cover and background-position: center to stretch, crop, and position the image (using background-image to set the image to the div).

It will set the image to shrink or grow to fit the div entirely then crop off anything outside of the div. It is a great way to handle images of somewhat different shapes and sizes in a div.

HTML

<div class="flexbox-container">
  <div class="filled-with-image"></div>
</div>

CSS

.flexbox-container {
  display: -webkit-flex;
  display: flex;
  -webkit-justify-content: flex-end;
  justify-content: center;
}

.filled-with-image {
  width: 50%;
  height:400px;
  background-image: url(http://unsplash.it/1500/1000?image=875);
  -webkit-background-size: cover;
  -moz-background-size: cover;
  background-size: cover;
  -o-background-size: cover;
  background-position: center bottom;
}

See the code here.