停止调整css代码中的图像大小 [英] Stop resizing of images in css code

问题描述

我有以下代码创建图像库。它必须回应。但是问题，当窗口宽度改变时，图像变得大小调整。它将会失去宽高比。任何方式来解决这个问题。我是新的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只有屏幕和（最大宽度：940像素），
 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标签
 
 
 
要使图片更加灵活，只需添加 max-width：100％和 height：auto  。在IE7中工作的图片 max-width：100％和 height：auto  IE错误）。要解决这个问题，您需要为IE8添加 width：auto\9 。
 
 
 
关于维持图像宽高比。 见演示。
 
I have the following code create a gallery of images. Its must be reponsive. But the problems, when the window width changes, images becomes resize. It will loose the aspect ratio. Any way to fix this. I am new to css coding
* {
    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 */
}
and then any images you add simply using the img tag will be flexible

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屋！