html - 如何防止在 CSS 中调整图像大小？

Question

我有以下代码来创建图像库。他们需要使用react。但问题是，当窗口宽度发生变化时，图像也会调整大小并失去纵横比。

我该如何解决这个问题？我是 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 标签添加的任何图像都将变得灵活

要使图像灵活，只需添加 ma​​x-width:100% 和 height:auto。图像 max-width:100% 和 height:auto 在 IE7 中有效，但在 IE8 中无效(是的，另一个奇怪的 IE bug)。要解决此问题，您需要为 IE8 添加 width:auto\9。

您可以查看有关保持图像长宽比的演示。 See demo .