Responsive images is an interesting topic in CSS development. The key thing to understand is that CSS can resize and scale images but it simply can't keep the original ratio of the images. The trick is to always use images that have an higher ratio and dimensions. If you have to create polaroid thumbnails, you should never use images whose dimensions are already resized to the thumbnail size because their layout will appear distorted or deformed when you change the browser's viewport size. Instead, use medium-sized images.
To make images scale along with the viewport, we need to define fluid dimensions and lengths:
figure {
margin: 1em;
padding: 0;
background: #f6f6f6;
border: 1px solid #eee;
width: 30%; /* fluid width */
box-shadow: 2px 2px 1px #ccc;
border-radius: 6px;
}
figure img {
display: block;
max-width: 90%; /* fluid maximum width */
max-height: 150px; /* fixed maximum height to keep ratio (change this) */
margin: 6% auto 0 auto; /* fluid margin */
}
figcaption {
padding: 4px 0;
text-align: center;
font-style: italic;
font-size: 85%;
color: #666;
margin: 0;
line-height: 1;
display: block;
}
Here is how our thumbnail appears at 768 and 1024 pixels on JSFiddle:
[html5-caption align="alignnone" caption="Our thumbnail at 768 pixels."]
[/html5-caption]
[html5-caption align="alignnone" caption="Our thumbnail at 1024 pixels."]
[/html5-caption]
[view-example url="http://jsfiddle.net/gabrieleromanato/BqEG3/"]
