I have a site with 4,000+ pages and 10 or more jpeg images per page, of varying sizes. I'm trying to make the site more mobile friendly. To that end, i want to make it possible for the images to shrink to fit on smaller screens. I know that i can do something like this to signal that the images can shrink:
img.bodyImg
{
width: 100%;
max-width: 357px;
height: auto;
}
But what if not all images have a width of 357 (or whatever), and i don't want smaller images stretched beyond their true dimensions? And just to make things more fun, what if the images tags don't have height and width attributes specified?
My goal is to find a solution that doesn't require me to adjust tens of thousands of image calls manually, but i can do a search and replace. Images are currently wrapped in a div container and have a class, like so:
<div class="imgDiv"><img class="bodyImg" src="http://www.example.com/image.jpg"></div>
I'm also open to the possibility that i'm going about this in the wrong way entirely.
Using max-width is simple, effective, and requires no JavaScript.
The CSS below creates responsive images that shrink to fit the container's width but won't expand beyond their native sizes.
img.bodyImg {
max-width:100%
}
In the demonstration below, both images are 300px X 75px. The first container is 200px wide and the second one is 400px wide. Notice that the first image shrinks to fit in the container, but the second image does not expand beyond its native size. Also note that the proportions of each image remain accurate.
div {
background-color: #CCC;
margin:0 0 .5em;
padding:.25em;
}
div.one {
width: 200px;
}
div.two {
width: 400px;
}
img {
display:block;
max-width: 100%;
}<div class="one">
<img src="http://lorempixel.com/300/75/abstract/4/" />
</div>
<div class="two">
<img src="http://lorempixel.com/300/75/abstract/4/" />
</div>Additional Notes
display:block to remove the descender space below the image.height:auto and/or width:auto to override those attributes.Collected from the Internet
Please contact [email protected] to delete if infringement.
Comments