HTML CSS

HOW TO KEEP IMAGE ASPECT RATIO

(a quick guide)

<img src="alpaca.jpg" style="width: 300px; height: auto;"/>

AUTO DIMENSIONS

01

<img src="alpaca.jpg" style="width: auto; height: 300px;"/>

FIXED IMAGE DIMENSIONS img {  border: 5px solid red;  width: 500px; height: 200px; }

OBJECT FIT IMAGE

02

RESIZE BEHAVIOR img.contain { object-fit: contain; } img.cover { object-fit: cover; } img.scale { object-fit: scale-down; } img.fill { object-fit: fill; }

#aspect-img {   width: 100%;   16:9 = 9/16 = 0.5625 = 56.25%   padding-bottom: 56.25%;   background: url("alpaca.jpg");   background-repeat: no-repeat;   background-size: 100% auto }   <div id="aspect-img"></div>

PADDING TRICK

03