{"id":1008,"date":"2016-09-19T14:50:44","date_gmt":"2016-09-19T13:50:44","guid":{"rendered":"http:\/\/sandjam.co.uk\/sandjam\/?p=1008"},"modified":"2018-08-03T13:50:44","modified_gmt":"2018-08-03T12:50:44","slug":"maintaining-aspect-ratio-with-css","status":"publish","type":"post","link":"https:\/\/sandjam.co.uk\/sandjam\/2016\/09\/maintaining-aspect-ratio-with-css\/","title":{"rendered":"Maintaining aspect ratio with CSS"},"content":{"rendered":"

There are occasion when you don’t want the size of a box to flow with the page content.<\/p>\n

For example, when you’re building a page of tiled content, you may want to make sure all of the tiles are the same size, but you can’t fix the height and width because the size must be fluid in relation to the size of the page.<\/p>\n

\"4030e83e34a8eb7c79174246298a7799\"<\/p>\n

Fixed aspect ratio<\/h2>\n

For example, we may want to make sure that each tile is 25% of the page width and always has an aspect ration of 4:3.<\/p>\n

We can’t rely on the content of each box to determine the size, because the content is dynamic. So how do we accomplish this?<\/p>\n

Pseudo tags<\/h2>\n

We use the “:before” pseudo tag to create an empty element which will determine the size of the box.<\/p>\n

We can fix the aspect of this pseudo tag by giving it a width of 100% and a padding-top value relating to the aspect.<\/p>\n

The rest of the content in the box should be absolutely positioned, so that it doesn’t affect the size of the box.<\/p>\n

\r\n\r\n.tile{\r\nposition:relative;\r\nfloat:left;\r\nwidth:25%;\r\nborder:solid #000 1px;\r\n}\r\n.tile:before{\r\ncontent:'';\r\ndisplay:block;\r\nwidth:100%;\r\npadding-top:75%;\r\n}\r\n.tile .tile-contnt{\r\nposition:absolute;\r\n}\r\n\r\n<\/pre>\n","protected":false},"excerpt":{"rendered":"
There are occasion when you don’t want the size of a box to flow with the page content. For example, when you’re building a page of tiled content, you may want to make sure all of the tiles are the same size, but you can’t fix the height and width because the size must be […]<\/p>\n","protected":false},"author":3,"featured_media":1010,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"_acf_changed":false,"footnotes":""},"categories":[4],"tags":[64,35,91,87,36],"class_list":["post-1008","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-code","tag-code-2","tag-css","tag-css3","tag-html5","tag-tips"],"acf":[],"_links":{"self":[{"href":"https:\/\/sandjam.co.uk\/sandjam\/wp-json\/wp\/v2\/posts\/1008","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/sandjam.co.uk\/sandjam\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/sandjam.co.uk\/sandjam\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/sandjam.co.uk\/sandjam\/wp-json\/wp\/v2\/users\/3"}],"replies":[{"embeddable":true,"href":"https:\/\/sandjam.co.uk\/sandjam\/wp-json\/wp\/v2\/comments?post=1008"}],"version-history":[{"count":2,"href":"https:\/\/sandjam.co.uk\/sandjam\/wp-json\/wp\/v2\/posts\/1008\/revisions"}],"predecessor-version":[{"id":1012,"href":"https:\/\/sandjam.co.uk\/sandjam\/wp-json\/wp\/v2\/posts\/1008\/revisions\/1012"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/sandjam.co.uk\/sandjam\/wp-json\/wp\/v2\/media\/1010"}],"wp:attachment":[{"href":"https:\/\/sandjam.co.uk\/sandjam\/wp-json\/wp\/v2\/media?parent=1008"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/sandjam.co.uk\/sandjam\/wp-json\/wp\/v2\/categories?post=1008"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/sandjam.co.uk\/sandjam\/wp-json\/wp\/v2\/tags?post=1008"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}