Остановить изменение размера изображений в коде css

Question

У меня есть следующий код, создайте галерею изображений. Должно быть, это нужно. Но проблемы, когда изменяется ширина окна, изображения изменяются. Он потеряет соотношение сторон. Любой способ исправить это. Я новичок в css-кодировании

* { 
    padding: 0; 
    margin: 0; 
} 

/*HEADER STYLES*/ 

.header { 
    width: 80%; 
    margin: 30px auto; 
    overflow: hidden; 
} 


.word:hover{ 
opacity: 0.9; 
    -webkit-transition: all .5s ease; 
    -moz-transition: all .5s ease; 
    -o-transition: all .5s ease; 
    -ms-transition: all .5s ease; 
     transition: all .5s ease; 
} 
.word { 

    -webkit-transition: all .5s ease; 
    -moz-transition: all .5s ease; 
    -o-transition: all .5s ease; 
    -ms-transition: all .5s ease; 
     transition: all .5s ease; 

    border-radius: 5px; 
    background:url(huzup.jpg); 
    background-size:100% 100%; 
    background-repeat:no-repeat; 

    color:white; 
    font-size:20px; 
    font-family: 'Russo One', sans-serif; 

    height:100PX; 
    width:180PX; 
    text-align:center; 
    border:1px solid silver; 
    display: table-cell; 
    vertical-align:middle; 
} 

.container { 
    width: 80%; 
    margin: 30px auto; 
    overflow: hidden; 
} 

/*GALLERY STYLES*/ 
.galleryItem { 
    color: #797478; 
    font: 10px/1.5 Verdana, Helvetica, sans-serif; 
    width: 16%; 
    margin: 2% 2% 50px 2%; 
    float: left; 
    -webkit-transition: color 0.5s ease; 
} 

.galleryItem h3 { 
    text-transform: uppercase; 
    line-height: 2; 
} 

.galleryItem:hover { 
    color: #000; 
} 

.galleryItem img { 
    max-width: 100%; 
    -webkit-border-radius: 5px; 
    -moz-border-radius: 5px; 
    border-radius: 5px; 
} 



/* MEDIA QUERIES*/ 
@media only screen and (max-width : 940px), 
only screen and (max-device-width : 940px){ 
    .galleryItem {width: 21%;} 
} 

@media only screen and (max-width : 720px), 
only screen and (max-device-width : 720px){ 
    .galleryItem {width: 29.33333%;} 
    .header h1 {font-size: 40px;} 
} 

@media only screen and (max-width : 530px), 
only screen and (max-device-width : 530px){ 
    .galleryItem {width: 46%;} 
    .header h1 {font-size: 28px;} 
} 

@media only screen and (max-width : 320px), 
only screen and (max-device-width : 320px){ 
    .galleryItem {width: 96%;} 
    .galleryItem img {width: 96%;} 
    .galleryItem h3 {font-size: 18px;} 
    .galleryItem p, .header p {font-size: 18px;} 
    .header h1 {font-size: 70px;} 
} 

Answer 1

img { 
    max-width: 100%; 
    height: auto; 
    width: auto\9; /* ie8 */ 
} 

, а затем любые изображения, которые вы просто добавить, используя IMG тег будет гибким

Чтобы сделать изображение гибкой, просто добавьте макс-ширина: 100% и высоты : авто. Изображение max-width:100% и height:auto работает в IE7, но не в IE8 (да, другая странная ошибка IE). Чтобы исправить это, вам нужно добавить width:auto\9 для IE8.

Вы можете просмотреть демонстрацию относительно поддерживаемых пропорций изображения. See demo.

Answer 2

Чтобы сохранить соотношение сторон для чувствительных изображений, вы можете использовать высоту: авто. Например:

img { 
    width:100%; 
    height:auto 
}