Изображения сжимаются при масштабировании

Question

У меня есть сетка с 8 изображениями. Ширина мудрых я сделал их довольно отзывчивыми.

.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; 
    } 
} 

Но когда тема уменьшена, она не выглядит такой замечательной. В моем случае я требую, чтобы он выглядел как-то нормально.

http://screencast.com/t/GlYN75pU

Вот предварительный просмотр site.This является актуальной просмотр, а не скриншот:

https://dl.dropboxusercontent.com/u/54191672/theme/index.html

Как я могу исправить изображения от сжато при уменьшении масштаба?

Answer 1

Вы ограничиваете ширину и высоту, что искажает соотношение сторон изображения при изменении ширины, но высота не меняется.

Для поддержания правильного соотношения сторон вы должны ограничивать только один из этих параметров. Большинство разработчиков ограничивают ширину, потому что устройства имеют физическую максимальную ширину просмотра, но могут иметь бесконечную вертикальную высоту просмотра с помощью прокрутки.

Например:

@media screen and (max-width: 1650px) { 
    .main-content { 
    width: 55.66666667%; 
    } 

    .gallery .item { 
    width: 33%; 
    /* or height: auto; */ 
    height: 100%; 
    } 
}