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: 
Add `object-fit: cover; max-width: 100%;` to `.productBox img`, this will make the image stay in the box and make sure that it wont shrink in a weird way.
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>

```