Introduction

To create a box with the required Width : Height ratio, so that image or video inside it can maintain its aspect ratio, we can make use of the CSS padding property. The padding property when specified in %, the value is always the % of the element width. Therefore by setting the padding-top to a % value and height = 0, a box with the required aspect ratio is obtained.

Sample Code

.cu-ppty-img {
	overflow: hidden;
	position: relative;
	width: 100%;
	height: 0;
	padding-top: 67%;  /* images with aspect 3:2  */
}

.cu-ppty-img img {
	position: absolute;
	top: 0;
	left: 0;
	height: 100% !important;
}