Setting Width / Height parameters for an Image

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?

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;

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

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