HTML CSS
HOW TO KEEP IMAGE ASPECT RATIO IN HTML CSS
<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