HTML CSS
(a quick guide)
<img src="alpaca.jpg" style="width: 300px; height: auto;"/>
<img src="alpaca.jpg" style="width: auto; height: 300px;"/>
FIXED IMAGE DIMENSIONS img { border: 5px solid red; width: 500px; height: 200px; }
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>