如何防止在CSS中调整图像大小? [英] How do you prevent resizing of images in CSS?

问题描述

我有以下代码来创建图像库.他们需要做出回应.但是问题是，当窗口宽度改变时，图像也会被调整大小并失去其宽高比.

I have the following code to create a gallery of images. They need to be responsive. But the problem is, when the window width changes, the images also get resized and lose their aspect ratios.

我该如何解决?我是CSS新手.

How can I fix this? I am new to 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;}
}

推荐答案

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

然后您仅使用img标签添加的任何图像都将很灵活

and then any images you add simply using the img tag will be flexible

要使图像更灵活，只需添加最大宽度:100％和 height:auto .图像max-width:100%和height:auto在IE7中有效，但在IE8中无效(是的，另一个怪异的IE错误).要解决此问题，您需要为IE8添加width:auto\9.

To make the images flexible, simply add max-width:100% and height:auto. Image max-width:100% and height:auto works in IE7, but not in IE8 (yes, another weird IE bug). To fix this, you need to add width:auto\9 for IE8.

您可以查看有关保持图像纵横比的演示. 请参见演示.

You can view the demo regarding maintaining image aspect ratios. See demo.

这篇关于如何防止在CSS中调整图像大小?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！