Setting Width / Height parameters for an Image

1

I am hunkering down today with the study of boxes. I have discovered that for any image I can apply Width / Height in CSS. However, arbitrary values for these 2 parameters can result in gross distortion of the original image as in
Width: 100px
Height: 900px
to cite an extreme example. This leaves me wondering whether there’s a way to apply Width only or Height only such that the other parameter is automatically chosen so as to maintain the original proportionality of the image?

2

Yeah! You can totally just specify one of the values, and that should be enough. You rarely need to specify both the width and height :slight_smile:

.img {
   width: 650px;
}
3

Also, if you need to give your image both a height and width but don’t want it to get distorted, you can specify an object-fit.

.img {
  width: 100px;
  height: 900px;
  object-fit: contain;
}
1 Like
4

Great ! I now know how to deal with the resizing of images.

2 Likes