How do you prevent resizing of images in CSS?
11,260
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.
Author by
Gijo Varghese
Updated on June 17, 2022Comments
-
Gijo Varghese almost 2 years
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.
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;} }
-
Gijo Varghese about 10 yearsThanks it worked. One more doubt. How can i set the width and height of image 180*100. Even on window resizing it must follow the aspect ratio.
-
Gijo Varghese about 10 yearsThanks it worked. One more doubt. How can i set the width and height of image 180*100. Even on window resizing it must follow the aspect ratio.
-
newTag about 10 yearsSee my updated answer with an example demonstrating the same. jsfiddle.net/Y8QC9