<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 a percentage attribute, it is based on a percentage of the parent element’s width. So if you set 100% here, it is equivalent to forming a square. If you wanted to display the image as 16:9, the height would be roughly (100% * 9)/16, which is 56%, on a proportional basis.
0 Comments