2016
CSS - IMAGE RATIO - Maintain Aspect Ratio Mixin | CSS-Tricks
by 2 others (via)maintaining the assigned aspect ratio as it resizes.
.sixteen-nine {
position: relative;
}
.sixteen-nine:before {
display: block;
content: "";
width: 100%;
padding-top: 56.25%;
}
.sixteen-nine > .content {
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
}
2013
CSS - The Layered Look: Better Responsive Images Using Multiple Backgrounds | CSS-Tricks
The following is a guest post by Parker Bennett. Parker has written for CSS-Tricks before, in his article Crop Top dealing with the positioning of fluid images. This is a great follow up to that, presenting another option in the never-ending responsive images saga. It's also an interesting contrast to yesterday's post on responsive images - so you can see how very different the approaches to this problem can be.
1
(2 marks)
