[英]How do you prevent resizing of images in CSS?
我有以下代码来创建图像库。 他们需要做出回应。 但是问题是,当窗口宽度改变时,图像也会被调整大小并失去其纵横比。
我怎样才能解决这个问题? 我是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标签添加的任何图像都将很灵活
要使图像灵活,只需添加max-width:100%和height:auto 。 图片max-width:100%
和height:auto
在IE7中有效,但在IE8中无效(是的,另一个怪异的IE错误)。 要解决此问题,您需要为IE8添加width:auto\\9
。
您可以查看有关保持图像纵横比的演示。 参见演示 。
要保持响应图像的宽高比,可以使用height:auto。 例如:
img {
width:100%;
height:auto
}
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.