Question: I have a row of 4 images that are inside a div, but the width of the images don't fit even though `.productBox img` is set to `width:auto`. It's still overflowing on the side.
[![enter image description here](https://i.stack.imgur.com/BZaSL.png)](https://i.stack.imgur.com/BZaSL.png)

I've been playing with it for awhile, but haven't got it to fit correctly. I created a stackblitz as well to share: <https://stackblitz.com/edit/bootstrap-dx6p1z>

I appreciate any help!

Answer: 
As you are using Bootstrap in your project, giving the bootstrap class img-fluid to all the images will make them fit in the div. Try giving the class img-fluid like this to image tag:

```
<div class="productBox"><img class="img-fluid" src="{{img}}" /></div>

```
Please try

```
.productBox img{
    max-width: 100%;
    height: auto;
    max-height: 200px;
 }

```

The `max-width: 100%` on an image scales it horizontally to fit its parent container also preventing it to be cut off, then height auto would scale it vertically to match its width. `max-height: 200px` would prevent the image from having the height greater than 200 at all times. Thus, aligning all boxes with images to the same height.