I'm not sure what problems you're referring to when you say you want to avoid 'distortions', as by far the simplest solution here is to include the image(s) themselves actually in the markup, and then add some styling to make them responsive.
However, you can achieve what you want with your approach (only browser support suffers). You know the ratio that you want the image to display at. First off, remove the width: 100%
from the .img
div (it's a div
, it will fill the horizontal space). Then, add your 50% as padding:
.img {
padding-bottom: 50%;
}
When you set a height (or vertical padding here) as a percentage, you're actually setting it as a percentage of the width of the parent. That means your .img
div will always have padding
equal to half of the .content
div, which is what you're after.
This is the same approach that's necessary to get fluid videos and iframes working. Check out this CSS Tricks article for a good explanation of what's going on.