Image Resizing adjusts ratio

Question

The images on my website resize and thus change their ratios. Without cropping the image in a photo editor I would like to make the image position and resize so that the overflow is hidden.

#menugallery img {
width: 100%%;
height: 400px;  
overflow: hidden;
}

And heres the HTML:

<li>
                <a href="#">
                    <img src="img/menuimages/burrito.png">
                    <p class="menucaption">Burritos</p>
                </a>
            </li>

Answer 1

You can't fix both height and width but keeping the ratios. So, you should either keep the width at 100% with the height auto. Or height: 100%; width: auto

#menugallery img {
  display: block;
  width: 100%;
  height: auto;  
  overflow: hidden;
}

or

#menugallery img {
  display: block;
  width: auto;
  height: 100%;  
  overflow: hidden;
}

or you can set the image to background with background-size: cover; background-position: center center;

#menugallery img_holder {
  display: block;
  height: 100%;
  width: 100%;
  background-position: center center;
  background-size: cover;
}

<div id="menugallery">
   <div class="img_holder" style="background-image: url('img.jpg');"></div>
</div>