How do I get the image to fit

How do I get the image to fit
0

#1

How do I get the image in the center of the page to fit the grid div fully?


#2

like this?

(added display: flex to image-container)


#3

Change the height and width from auto to 100%

.image {
  height: 100%;
  width: 100%;
}

#4

I did the 100% on both, but now at ~500px give or take screen size, the image is very distorted. Would I make another media query or?


#5

I would alter your grid so that there’s less text and more room for your image container.