# Setting Width / Height parameters for an Image

**URL:** <https://forum.kirupa.com/t/setting-width-height-parameters-for-an-image/645488>\
**Category:** Uncategorized\
**Created:** [December 28, 2020, 4:55pm UTC](https://forum.kirupa.com/t/setting-width-height-parameters-for-an-image/645488 "2020-12-28T16:55:44Z")\
**Posts on this page:** 4\
**Page:** 1

<div class="post-metadata">

**Author:** ![John\_Stern](https://yyz1.discourse-cdn.com/flex011/user_avatar/forum.kirupa.com/john_stern/32/12050_2.png) [@John\_Stern](https://forum.kirupa.com/u/John_Stern)\
**Post date:** [December 28, 2020, 4:55pm UTC](https://forum.kirupa.com/t/setting-width-height-parameters-for-an-image/645488/1 "2020-12-28T16:55:44Z")

</div>

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?

---

<div class="post-metadata">

**Author:** ![kirupa](https://yyz1.discourse-cdn.com/flex011/user_avatar/forum.kirupa.com/kirupa/32/11616_2.png) [@kirupa](https://forum.kirupa.com/u/kirupa)\
**Post date:** [December 28, 2020, 5:35pm UTC](https://forum.kirupa.com/t/setting-width-height-parameters-for-an-image/645488/2 "2020-12-28T17:35:19Z")

</div>

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 🙂

```
.img {
   width: 650px;
}
```

---

<div class="post-metadata">

**Author:** ![senocular](https://yyz1.discourse-cdn.com/flex011/user_avatar/forum.kirupa.com/senocular/32/7217_2.png) [@senocular](https://forum.kirupa.com/u/senocular)\
**Post date:** [December 28, 2020, 6:11pm UTC](https://forum.kirupa.com/t/setting-width-height-parameters-for-an-image/645488/3 "2020-12-28T18:11:43Z")

</div>

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](https://developer.mozilla.org/en-US/docs/Web/CSS/object-fit).

```css
.img {
  width: 100px;
  height: 900px;
  object-fit: contain;
}

```

---

<div class="post-metadata">

**Author:** ![John\_Stern](https://yyz1.discourse-cdn.com/flex011/user_avatar/forum.kirupa.com/john_stern/32/12050_2.png) [@John\_Stern](https://forum.kirupa.com/u/John_Stern)\
**Post date:** [December 28, 2020, 6:36pm UTC](https://forum.kirupa.com/t/setting-width-height-parameters-for-an-image/645488/4 "2020-12-28T18:36:55Z")

</div>

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