{"id":195512,"date":"2015-02-10T14:58:35","date_gmt":"2015-02-10T21:58:35","guid":{"rendered":"http:\/\/css-tricks.com\/?page_id=195512"},"modified":"2015-02-11T12:56:11","modified_gmt":"2015-02-11T19:56:11","slug":"maintain-aspect-ratio-mixin","status":"publish","type":"page","link":"https:\/\/css-tricks.com\/snippets\/sass\/maintain-aspect-ratio-mixin\/","title":{"rendered":"Maintain Aspect Ratio Mixin"},"content":{"rendered":"

This article<\/a> from July 2013 describes a method of using psuedo elements to maintain an elements aspect ratio, even as it scales.<\/p>\n

Here’s a Sass mixin that simplifies the math a bit.<\/p>\n

@mixin aspect-ratio($width, $height) {\r\n  position: relative;\r\n  &:before {\r\n    display: block;\r\n    content: \"\";\r\n    width: 100%;\r\n    padding-top: ($height \/ $width) * 100%;\r\n  }\r\n  > .content {\r\n    position: absolute;\r\n    top: 0;\r\n    left: 0;\r\n    right: 0;\r\n    bottom: 0;\r\n  }\r\n}<\/code><\/pre>\n
The mixin assumes you’ll be nesting an element with the class of content inside your initial block. Like this:<\/p>\n
<div class=\"sixteen-nine\">\r\n  <div class=\"content\">\r\n    insert content here\r\n    this will maintain a 16:9 aspect ratio\r\n  <\/div>\r\n<\/div><\/code><\/pre>\n
Using the mixin is as easy as:<\/p>\n
.sixteen-nine {\r\n  @include aspect-ratio(16, 9);\r\n}<\/code><\/pre>\n
Result:<\/p>\n
.sixteen-nine {\r\n  position: relative;\r\n}\r\n.sixteen-nine:before {\r\n  display: block;\r\n  content: \"\";\r\n  width: 100%;\r\n  padding-top: 56.25%;\r\n}\r\n.sixteen-nine > .content {\r\n  position: absolute;\r\n  top: 0;\r\n  left: 0;\r\n  right: 0;\r\n  bottom: 0;\r\n}<\/code><\/pre>\n
Demo<\/h3>\n
Here’s a demo showing the above code in action. The animation is added to show the element maintaining the assigned aspect ratio as it resizes.<\/p>\n
See the Pen Maintain Aspect Ratio Demo<\/a> by Sean Dempsey (@seanseansean<\/a>) on CodePen<\/a>.<\/p>\n
Thanks to Sean Dempsey<\/a> (@thatseandempsey<\/a>) for this one!<\/p>\n","protected":false},"excerpt":{"rendered":"
This article from July 2013 describes a method of using psuedo elements to maintain an elements aspect ratio, even as it scales. Here’s a Sass mixin that simplifies the math a bit. @mixin aspect-ratio($width, $height) { position: relative; &:before { display: block; content: “”; width: 100%; padding-top: ($height \/ $width) * 100%; } > .content […]<\/p>\n","protected":false},"author":3,"featured_media":0,"parent":191187,"menu_order":0,"comment_status":"open","ping_status":"closed","template":"page-snippet.php","meta":{"_bbp_topic_count":0,"_bbp_reply_count":0,"_bbp_total_topic_count":0,"_bbp_total_reply_count":0,"_bbp_voice_count":0,"_bbp_anonymous_reply_count":0,"_bbp_topic_count_hidden":0,"_bbp_reply_count_hidden":0,"_bbp_forum_subforum_count":0,"sig_custom_text":"","sig_image_type":"featured-image","sig_custom_image":0,"sig_is_disabled":false,"inline_featured_image":false,"c2c_always_allow_admin_comments":false,"footnotes":""},"tags":[],"acf":[],"jetpack-related-posts":[{"id":192882,"url":"https:\/\/css-tricks.com\/snippets\/sass\/css-triangle-mixin\/","url_meta":{"origin":195512,"position":0},"title":"CSS Triangle Mixin","date":"January 11, 2015","format":false,"excerpt":"There is a fairly popular CSS hack using transparent borders on a 0-width \/ 0-height element to mimic triangles. There is a CSS snippet here on CSS-Tricks that depicts it. If, like me, you never quite remember how it works, be sure we can use Sass to help us. \/\/\/\u2026","rel":"","context":"With 7 comments","img":{"alt_text":"","src":"","width":0,"height":0},"classes":[]},{"id":192753,"url":"https:\/\/css-tricks.com\/snippets\/sass\/covering-mixin\/","url_meta":{"origin":195512,"position":1},"title":"Covering Mixin","date":"January 9, 2015","format":false,"excerpt":"I find myself using these properties together all the time, which is typically a good opportunity for an abstraction like a mixin: @mixin coverer { position: absolute; top: 0; left: 0; width: 100%; height: 100%; } For example, a full-page overlay: .overlay { @include coverer; background: rgba(black, 0.5); z-index: 1000;\u2026","rel":"","context":"With 1 comment","img":{"alt_text":"","src":"","width":0,"height":0},"classes":[]},{"id":192751,"url":"https:\/\/css-tricks.com\/snippets\/sass\/centering-mixin\/","url_meta":{"origin":195512,"position":2},"title":"Centering Mixin","date":"January 9, 2015","format":false,"excerpt":"Assuming the parent element has position: relative;, these four properties will center a child element both horizontally and vertically inside, no matter what the width of height of either are. @mixin centerer { position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); } .parent { position: relative; } .child {\u2026","rel":"","context":"With 12 comments","img":{"alt_text":"","src":"","width":0,"height":0},"classes":[]},{"id":332875,"url":"https:\/\/css-tricks.com\/almanac\/properties\/a\/aspect-ratio\/","url_meta":{"origin":195512,"position":3},"title":"aspect-ratio","date":"January 20, 2021","format":false,"excerpt":"The CSS property aspect-ratio lets you create boxes that maintain proportional dimensions where the height and width of a box are calculated automatically as a ratio. It's a little math-y, but the idea is that you can divide one value by another on this property and the calculated value ensures\u2026","rel":"","context":"Similar post","img":{"alt_text":"","src":"https:\/\/i0.wp.com\/css-tricks.com\/wp-content\/uploads\/2020\/05\/Screen-Shot-2020-05-29-at-6.23.02-AM.png?resize=350%2C200&ssl=1","width":350,"height":200},"classes":[]},{"id":191213,"url":"https:\/\/css-tricks.com\/snippets\/sass\/mixin-manage-breakpoints\/","url_meta":{"origin":195512,"position":4},"title":"Mixin to Manage Breakpoints","date":"December 19, 2014","format":false,"excerpt":"Responsive Web Design creations often exist over several different breakpoints. Managing those breakpoints is not always easy. Using them and updating them can sometimes be tedious. Hence the need for a mixin to handle breakpoint configuration and usage. Simple version First you need a map of breakpoints, associated to names.\u2026","rel":"","context":"With 3 comments","img":{"alt_text":"","src":"","width":0,"height":0},"classes":[]},{"id":194420,"url":"https:\/\/css-tricks.com\/snippets\/sass\/custom-scrollbars-mixin\/","url_meta":{"origin":195512,"position":5},"title":"Custom Scrollbars Mixin","date":"January 28, 2015","format":false,"excerpt":"Scrollbars are one of those UI components that are present on almost every page of the internet, yet we (developers) have little to no control over it. Some browsers give us the ability to customize their appearance but for most browsers including Firefox it just is not possible. There has\u2026","rel":"","context":"In \"scrollbars\"","img":{"alt_text":"","src":"","width":0,"height":0},"classes":[]}],"_links":{"self":[{"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/pages\/195512"}],"collection":[{"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/pages"}],"about":[{"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/types\/page"}],"author":[{"embeddable":true,"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/users\/3"}],"replies":[{"embeddable":true,"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/comments?post=195512"}],"version-history":[{"count":3,"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/pages\/195512\/revisions"}],"predecessor-version":[{"id":195683,"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/pages\/195512\/revisions\/195683"}],"up":[{"embeddable":true,"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/pages\/191187"}],"wp:attachment":[{"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/media?parent=195512"}],"wp:term":[{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/tags?post=195512"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}