Image resolution is bad when max-width:100% in css - resize down

Question

How do I fix the CSS so that the resolution is not lost when I scale down?

Here is the HTML:

<span class="image main small"><img src="images/example.png" alt="" /></span>

CSS for the <img> :

.image.main img {
    width: 100%;
}
.image img {
    border-radius: 0px;
    display: block;
}

CSS for the <span>:

.image.small {
    padding: 2.5em 6em 0.8em 6em;
    max-width: 100%;
}
.image.main {
    display: block;
    margin: 0 0 1.5em 0;
    max-width: 100%;
}
.image {
    border-radius: 4px;
    border: 0;
    display: inline-block;
    position: relative;
}

(there are multiple classes because the original code was from a template, and I'm just modifying it. If you know how to make this simpler, please let me know!)

screenshot of the demo is below. Notice how the image resolution is bad. The original example.png is quite crisp and resolution is high.

How do I fix the CSS so that the resolution is not lost when I scale down?

I have also looked at a Similar Question Here, but it didn't help much.

I also tried using Picturefill, I couldn't completely understand how to use it with my situation.

Answer 1

Maybe it is about the aspect ratio. By using an height: auto on the image this will solve that. Give the container, in this case the <span> a max-width 100%, and set the width of the image in what you want. Now the image will have the correct width/height ratio.

/*
<span class="image main small"><img src="images/example.png" alt="" /></span>
*/

.image {
  display: inline-block;
  position: relative;
  border-radius: 4px;
  line-height: 1;
}
.image.main {
  display: block;
  max-width: 100%;
  margin: 0 0 1.5em 0;
}
.image.small {
  max-width: 100%;
  padding: 2.5em 6em 0.8em 6em;
}
.image img {
  width: 100%;
  height: auto;
  border: 0;
  border-radius: 4px;
}
.image.main img {
  width: 100%;
}