Height of an Image

#1

How is assigning a value to width also affecting the height of the image in this case??

.card{
	width: 22%;
	padding: 1.5%;
	height:300px;
	float: left;
	text-align: center;
}
.card img{
	width:100%;
}

Code for HTML

<div class="card-list">
			<h1 id="product">Products</h1>
			<div class="card">
				<img src="assets\coffeecards\americano-image.png">
				<div>
					<h2>Americano</h2>
					<h3> &#8377; 250</h3>
				</div>
			</div>
		</div>

image
image1346Ă—389 31.1 KB

when width is given 50%

The height also seems to automatically get adjusted.

#2

Hi @rishav_201900071,
The height is also getting affected with the change in width because the browser is trying to maintain the aspect ratio of the image, so it looks good and is not squeezed or something. Kindly set both width and height properties on the image if you need something specific.

example:

.card img{
width:100%;
height:10%;
}
1 Like
#3

Thank you…Understood

1 Like