CSS Responsive Background Image with using Image Aspect Ratio

Here is css trick to create responsive background image in css without javascript. Essentially, the trick try to set the element which has class background dimension as feasible as can be. padding-bottom will be introduced to help archive this. What we do here is to populate the value of padding-bottom calculated as percentage by the aspect ratio of background image, as well as the set the element’s height is 0;

1) set the height to 0;
2) calculate the image’s aspect ratio (the percentage of width to height – (height/width) * 100 );
3) apply the image’s aspect ratio to the padding-bottom for reveal the image height instead;
4) set background-size to be 100% in order to keep the image the same size as the element.

Resource

Leave a Reply

Your email address will not be published. Required fields are marked *

CAPTCHA