你如何防止在 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: auto9; /* ie8 */
}

然后您只需使用 img 标签添加的任何图像都将是灵活的

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

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

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:auto9 for IE8.

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

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

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