Responsive images in CSS are pretty easy: just set the width: 100%
and height: auto
and you're good to go. Things get a little unpredictable, though, when dealing with background images. Since putting a height on the element causes lots of responsive headaches, one workaround is to have the container scale by its aspect ratio. This can be achieved by setting a few attributes to the element's :after
tag:
.my-element {
overflow: hidden;
position: relative;
}
.my-element:after {
content: "";