Create a gist now

Instantly share code, notes, and snippets.

What would you like to do?
Answer for adobe ask the experts

Q: What is your favorite Css 'trick'?

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: "";
  display: block;
  height: 0;
  padding-top: 56.25%; /* Aspect ratio = height divided width times 100 */
}

See a CSS demo, or grab this handy Sass mixin.


Daniel Box
Designer, KNI

Good little trick ;)

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment