How to resize image the way I want, responsively

[Erik_J]

@wake689

I know that using a fixed image height of 500px is not the right way to go but have left that in there to be altered.

Hi,

Try 100% for the height too, and see if that fits the fluid height better:

img.pic{
  width: 100%; /* of the grid area */
  height: 100%; /* of the grid area */
  border: 3px solid blue;
  object-fit: cover;
  box-sizing: border-box; /* added to keep the total size */
}