Responsive Container Demo
A responsive container built with CSS and simple HTML can be used to put an image, ad or any other element into a web page so that it displays correctly in screens of any size and also avoids contributing to Cumulative Layout Shift (CLS) which Google will begin using as a ranking signal in May 2021.
First: this is an empty responsive container - with green background to make it visible - of 16:9 aspect ratio and unconstrained size which spans the entire width of the BODY of the page:
Then: this is a responsive container of 16:9 aspect ratio - constrained by CSS to a ‘max-width’ of 600 pixels - with an 800px x 450px image of 16:9 aspect ratio inside it:
1. This is the CSS code in the HEAD of this page which creates the styling of the responsive containers above:
- The 56.25% bottom padding is what sets the aspect ratio of the container: the aspect ratio of a 16:9 container is (obviously) 16:9, and its height is 56.25% of the width (since 9/16 = 0.5625). You can create a container of any aspect ratio just by changing the bottom padding as necessary, e.g., for a 4:3 container, set padding at 3/4 = 0.75 or 75.00%.
- You can change the name of the CSS class '.sixteenninecontainer' to anything you want provided that the name contains letters only, no numbers or special characters.
2. This is the HTML code in the BODY of this page which displays the empty (green) responsive container, above:
3. This is the HTML code in the BODY of this page which displays the responsive container and the image inside it, above:
- 'max-width' is set on the container, not on the image.
- Because the 'img' tag doesn't contain 'height' or 'width' figures for the 800px x 450px image file, e.g., [img src="../images/technical-seo800.png" width="800" height="450"] the dimensions of the container determine the dimensions of the image as it is displayed in the page. Absent the responsive container, using an image tag with no dimensions would result in the dreaded Layout Shift.