Trying to scale images in the single column for narrower screens

Question

I have a really simple centred homepage with clickable images 788x335 pixels. They will auto sort themselves to 3 columns, 2 columns, then 1 column when I decrease the screen size horitontally. But I can't figure out how to scale the images in the final 1 column view, for mobile. Currently they just show in a 1 column list but cropped at full size.

CSS

.grid-test {
display: grid;
grid-template-columns: repeat(auto-fill, 788px);
justify-content: center; 
}


HTML

<div class="grid-test">
    <img src="1.jpg">
            <img src="2.jpg">
            <img src="3.jpg">
            <img src="4.jpg">
            <img src="5.jpg">
            <img src="6.jpg">
            <img src="7.jpg">
            <img src="8.jpg">
            <img src="9.jpg">
     </div>

Answer 1

I would try the aspect-ration property.

Documentation: https://developer.mozilla.org/en-US/docs/Web/CSS/aspect-ratio

Browser Support: https://caniuse.com/?search=aspect-ratio

.grid-test {
  display: grid;
  grid-template-columns: repeat(auto-fill, 788);
  justify-content: center;
}

.grid-test img {
    width: 100%;
    aspect-ratio: auto;
}

<div class="grid-test">
  <img src="https://picsum.photos/800/700">
  <img src="https://picsum.photos/800/600">
  <img src="https://picsum.photos/800/500">
  <img src="https://picsum.photos/800/400">
  <img src="https://picsum.photos/800/500">
  <img src="https://picsum.photos/800/600">
  <img src="https://picsum.photos/800/700">
  <img src="https://picsum.photos/800/800">
</div>