In CSS why does the width property also affect the height?

HTML-CSS
1

Hello I’d like to understand why on the lesson below (link) the width property applied to the .smaller-image class changes the image size too? I would have assume that in order to affect the height we would have to include a height property?

.smaller-image {
    width: 100px;
}

Lesson link:

2

The width property changes the size because, ure expanding the width

I think this link will give u a good visual image as how it works excatly

https://www.w3schools.com/cssref/tryit.asp?filename=trycss_dim_width_percent

3

Thanks. I know it should expand the size, but if so, it would be come a rectangle, instead, it increases the height in proportion.

I am confused about the height. Could you help further please?

Thanks

4

The default value of both the height and width in CSS is auto, which means it will adjust accordingly to fit the content (in this case, the image). The image will not break scaling unless you specify both the height and width.

5

Wow, amazing!! Thanks for explaining. It makes perfect sense now after understanding the auto default.

Thanks