1 reply [Last post]
Phoenix, AZ
Last seen: 5 years 50 weeks ago
Phoenix, AZ
Timezone: GMT-7
Joined: 2009-03-04
Posts: 35
Points: 17

I know how to scale single images with the code below. It works brilliantly.


However what if I needed to scale 2 images that were sitting next to each other? In that case I need to add a float:left to both images which in my experiments screwed up everything. I got weird results and nothing worked right.

Ultimately I combined multiple images into 1 image and used the old code. But sometimes that isn't possible.

In the link below what code would I use if I kept the before and after photos as 2 separate JPGs? Is there a way to do this with CSS?

Overgrown Mesquite Tree

gary.turner's picture
Last seen: 1 year 38 weeks ago
Timezone: GMT-6
Joined: 2004-06-25
Posts: 9776
Points: 3858

First things first

Never ever minimize your code. By never, I mean don't do it even under torture. If you have such a large text file that stripping the white spaces makes a significant difference in bandwidth requirements, it's not the whitespace/formatting that is causing the problem.

Always write well formatted code for humans to read. Assume the guy who maintains your code is a violent psychopath who knows where you live. A well maintained site costs one and a half to twice the initial cost each year for maintenance and debugging; don't make it even more expensive by screwing up the legibility.

Here is one way to deal with your issue. It uses a fluid size with limits, plus it's responsive to the UA's viewport size. Edited images are attached.

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN"
      Overgrown Mesquite Tree Trimming In Desert Ridge, 85054
    <meta name="viewport"
          content="width=device-width, initial-scale=1.0">
    <meta http-equiv="content-type"
          content="text/html; charset=utf-8">
    <meta http-equiv="cache-control"
    <link rel="stylesheet"
          media="screen, tv, projection"
    <link rel="stylesheet"
          media="(max-width: 680px)"
    <link rel="shortcut icon"
    <div id="wrapper">
      <p id="before-after">
        <img src="before.jpg"
           alt="[Photo of Mesquite tree before trimming]"> <img src=
           alt="[Photo of mesquite tree after trimming]">
        Price: $150
        This Mesquite tree had become overgrown and had branches
        hanging over the neighbor's driveway. These low branches
        needed constant attention and cutbacks. We brought them
        back to the property line by cutting them at the "forks"
        which should buy the owner many months or even years before
        regrowth becomes a significant problem.

Primary css
html, body {
  margin: 0;
  padding: 0;
  font: 100%/1.25 sans-serif;
p {
  font-size: 1em;
h1 {
  background-color: #ffdd20;
  border: 2px solid #c56500;
  color: #404040;
  display: table;
  margin: 0 auto;
  padding: 0 1.25rem;
#wrapper {
  margin: 0 auto;
  max-width: 960px;
  width: 95%;
p#before-after {
  margin-top: 0;
  text-align: center;
p#before-after img {
  display: inline-block;
  min-width: 320px;
  width: 49%;

Small screen css
p#before-after img {
  /* limit width to natural size max */
  max-width: 480px;
  width: 95%;

Ask about whatever isn't clear.



after.jpg 27.13 KB
before.jpg 27.15 KB

If your web page is as clever as you can make it, it's probably too clever for you to debug or maintain.