I have been trying for a couple of days now to configure my thumbnail gallery so all the images appear the same height and width. However when I change the Css code to,
max-height: 150px;
max-width: 200px;
width: 120px;
height: 120px;
I get images that are all the same size but the aspect ratio is stretched ruining the images. is there not a way to resize the image container and not the image instead? allowing me to keep the aspect ratio. but resize the image still. (I dont mind if i cut off some of the image.)
Thanks in advance!
this is a known problem with CSS resizing, unless all images have the same proportion, you have no way to do this via CSS.
The best approach would be to have a container, and resize one of the dimensions (always the same) of the images. In my example I resized the width.
If the container has a specified dimension (in my example the width), when telling the image to have the width at 100%, it will make it the full width of the container. The auto
at the height will make the image have the height proportional to the new width.
Ex:
HTML:
<div class="container">
<img src="something.png" />
</div>
<div class="container">
<img src="something2.png" />
</div>
CSS:
.container {
width: 200px;
height: 120px;
}
/* resize images */
.container img {
width: 100%;
height: auto;
}