如何防止在CSS图像大小调整?(How do you prevent resizing of ima

2019-10-19 13:06发布

我有以下代码来创建图像的画廊。 他们需要的是响应。 但问题是,当窗口宽度的变化,图像也得到调整大小和失去他们的纵横比。

我怎样才能解决这个问题? 我是新来的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%height:汽车 。 图片max-width:100%height:auto在IE7的作品,但不是在IE8(是的,另一个奇怪的IE漏洞)。 为了解决这个问题,你需要添加width:auto\9的IE8。

您可以查看关于维护图像纵横比的演示。 观看演示 。



Answer 2:

为了保持图像的响应,你可以使用高宽比:汽车。 例如:

img {
    width:100%;
    height:auto
}


文章来源: How do you prevent resizing of images in CSS?