Automatically Re-sizing Images in Responsive Design

Hello everyone,

I have been trying to decipher how to automatically expand and shrink the images on the landing pages for my website. I have been utilizing resources like one on [URL=“http://webdesignerwall.com/tutorials/5-useful-css-tricks-for-responsive-design”]Web Designer Wall. I also read on Stack Overflow with someone having a similar issue, and someone was saying it had to do with the parent element not resizing, with a recommendation to add width:100% to that element. Since I want the articles’ pictures to be resized and those images’ parent element are divs with either class of .floatLeft or .floatRight, then why don’t the following styles generate the shrinking/expansion of the images when the browser is being resized?


.floatRight,
.floatLeft{
	width:100%;
    overflow:hidden;
    margin:8px 0;       /* vertical margin between content sections */
}
.floatRight img, .floatLeft img{
	max-width:100%;
	height:auto;
}
.floatRight img{
    float:right;
    border:3px inset #000;
    margin-left:2em;
}
.floatLeft img{
    float:left;
    border:3px inset #000;
    margin-right:8px;
}
img{display:block;}

Thanks,
Tyler

Resizing images using percent widths when the width of the window changes would be a “fluid” behavior that is popularly incorporated in responsive designs. If you forego the fluid behavior (whose value is debatable), the responsive behavior with media queries is very easy.

Aside: I noticed that the images do not have explicit width and height assignments either in CSS or HTML. While not always necessary, it’s a good idea to do so.

Here’s the “responsive” thought…

The text flows around the images nicely as the page is resized. But it would be nice if the images were smaller at narrower page widths. You can easily do that by simply assigning smaller dimensions to the images in css with media queries. The images will scale to fit those dimensions. Your images are few and not very big, so this solution should be satisfactory.

More…

Resizing images by assigning % widths is cool but is very CPU intensive (probably not a real issue, though). Assigning smaller fixed dimensions at preferred widths is more efficient (and much easier to code). Loading individually pre-sized images is even more device efficient. For mobile devices, for example, you could actually use an entirely different set of images that are sized smaller, thereby eliminating the bandwidth required to download the larger images.

Hope this is helpful.

Yes, this is helpful (as usual). Although, I’m going to need a resource that explains how this is done. I understand setting the dimensions in HTML like so:


<img src="some-image-file.jpg" title="Title of Image" alt="Short description of what the image is about" width="300px" height="200px" />

I don’t know what would need to be input in the CSS.

etidd,

Assuming you groove on the fluid images, here’s a hack for you.

First, surround the floated images with a classed <div> (the numbers conveniently correspond to the image names):
<div class=“imgbox1”>…</div>
<div class=“imgbox2”>…</div>
<div class=“imgbox3”>…</div>

Make the following style changes to lp.css starting around line 114:


.floatRight,
.floatLeft {
    overflow:hidden;
    margin:8px 0;       /* vertical margin between content sections */
}
[color=red]/*  DELETE these RED styles
.floatRight img {
    float:right;
    border:3px inset #000;
    margin-left:2em;
}

.floatLeft img {
    float:left;
    border:3px inset #000;
    margin-right:8px;
}[/color]

img {display:block;}

.floatLeft img,
.floatRight img {
    width:100%;
    height:auto;
}
* [class^=imgbox] {
    height:auto;
    border:3px inset #000;  /* ??? */
}
.floatRight [class^=imgbox] {
    float:right;
    margin-left:.5em;
}
.floatLeft [class^=imgbox] {
    float:left;
    margin-right:.5em;
}
.imgbox1 {width:43%;}
.imgbox2 {width:34%;}
.imgbox3 {width:20%;}

The only value you have to supply is the width value of the .imgbox# (last 3 lines in this code). I chose these values because they approximate the original dimensions of the images. You can fudge, of course :slight_smile: Just remember that if an image is scaled larger than it’s native dimensions, it soon becomes fuzzy.

Note that there are NO media queries involved.

Tested in the big 4 (including IE8 & 9) and seems to work. Not tested in mobile devices.

I am thinking of adding a class named “shrink” to images I want this to apply to. I specified the width and height of the images in the HTML, and inside a media query when the browser is 780px wide, the image will be 60% of its original size. It does perform fluid motion, however, which is CPU intensive, and it is scaled down until it reaches the 60% mark.

It may be more useful to link to a new CSS file, say “insuranceimages.css”, and just do them individually with i.d.'s and assign new dimensions in pixels. Though, it’s considerable that a new CSS file with a bunch of different commands for several different images may be just as CPU intensive.


<img src="2insure4lesslifereview1.jpg" title="Life Insurance Policy" alt="Live a bit more securely after obtaining a life insurance policy." class="shrink" width="350px" height="233px" />


@media screen and (max-width:780px){
	h3{margin:0 auto; text-align:center; padding:10px 0 0;} /* not relevant to this topic */
	#emailbox{float:none; margin:0 auto;}   /* not relevant */
	.shrink{width:60%; height:60%;}
}

Let me backtrack somewhat on my comment about images with percent widths. Yes, they can be CPU intensive but only while the width of the browser is being changed. If the width of the browser doesn’t change, there is no need to redraw the images; therefore, it’s not an issue. And most users do not change the width of their browser :slight_smile: , only us coders :slight_smile: .

Your responsive solution seems very efficient… and easy :slight_smile: .

Well, what I chose to do with the images was pretty simple after all. I liked learning about shrinking them a bit as the viewport becomes more narrow, but I also didn’t mind the size of the images for the most part (most are not that big, like you mentioned). What I was not in favor of was the text becoming all smushed and becoming two words to a line, like such:

Roses are
red. Violets
are blue. I
have no
room to fit
this.

What I elected to do was to remove the floats and begin to center all the page content. I like my decision.

Here are the styles that I’m currently using:


@media screen and (max-width:650px){
	.floatRight img, .floatLeft img{
		float:none;
		margin:0 auto;
		max-width:90%;
	}
	.articletext, .hazard, .headtitle{text-align:center;}
}

Thank you,
ty