Images are squashed on zoom - css

Question

I have a grid with 8 images. Width wise I've made them pretty responsive.
.gallery .item {
width: 33%;
height: 368px;
float: left;
}
#media screen and (max-width: 1650px) {
.main-content {
width: 55.66666667%;
}
.gallery .item {
width: 33%;
height: 330px;
}
}
#media screen and (max-width: 1540px) {
.gallery .item {
width: 33%;
height: 290px;
}
}
#media screen and (max-width: 1450px) {
.main-content {
width: 50.66666667%;
}
.gallery .item {
width: 33%;
height: 250px;
}
}
#media screen and (max-width: 1315px) {
.main-content {
width: 45.66666667%;
}
.gallery .item {
width: 33%;
height: 210px;
}
}
#media screen and (max-width: 1200px) {
.main-content {
width: 75%;
}
.gallery .item {
width: 33%;
height: 260px;
}
}
#media screen and (max-width: 1000px) {
.main-content {
width: 100%;
position: relative;
}
.gallery .item {
width: 33%;
height: 290px;
}
}
#media screen and (max-width: 830px) {
.gallery .item {
width: 33%;
height: 250px;
}
}
#media screen and (max-width: 650px) {
.gallery .item {
width: 33%;
height: 180px;
}
}
#media screen and (max-width: 650px) {
.gallery .item {
width: 33%;
height: 180px;
}
}
#media screen and (max-width: 560px) {
.gallery .item {
width: 33%;
height: 175px;
}
}
#media screen and (max-width: 500px) {
.gallery .item {
width: 100%;
height: 410px;
}
}
#media screen and (max-width: 380px) {
.gallery .item {
width: 100%;
height: 350px;
}
}
But when the theme is zoomed out, it doesn't look so great. In my case I require it to look at-least OK.
http://screencast.com/t/GlYN75pU
Here is a preview of the site.This is an actual preview, not a screenshot:
https://dl.dropboxusercontent.com/u/54191672/theme/index.html
How can I fix the images from being squashed when zooming out?

Answer 1

You're constraining width and height, that distorts the images aspect ratio as the width changes but the height does not.
In order to maintain the correct aspect ratio you must only constrain one of those parameters. Most developers constrain width because devices have a physical maximum viewing width, but can have an infinite vertical viewing height through scrolling.
For example:
#media screen and (max-width: 1650px) {
.main-content {
width: 55.66666667%;
}
.gallery .item {
width: 33%;
/* or height: auto; */
height: 100%;
}
}