Image Height adaptive and consistent with the Width of the parent div in CSS

<div class="box"> <img src="upimg/comm.png"/> </div> <div class="box"> <img src="upimg/comm1.png"/> </div> <div class="box"> <img src="upimg/comm2.png"/> </div> .box{ width: 100%; margin: 20px auto; background: skyblue; position: relative; padding-bottom: 56%; // change this overflow: hidden; } .box>img{ width: 100%; position: absolute; top: 0; left: 0; } Note: padding-bottom attribute: when the value is Read more…