如何使用媒体查询更改不同屏幕尺寸的图像？

Question

How do I change images at different screen sizes using media queries? I want image 1 to display for desktop and at 800px, I want the image 2 display for smaller screens.

Here is my code below:

 * {
  box-sizing: border-box;
 }

.bow {
  display: grid;
  grid-template-columns: 1fr 1fr;
 }

.left {
   background-color: #eee;
   display: flex;
   flex-direction: column;
   justify-content: center;
   padding-left: 2rem;
 }

 img {
   width: 100%;
   display: flex;
   object-fit: contain;
  }

 @media only screen and (max-width: 800px) {
     .bow {
       grid-template-columns: 1fr;
       grid-auto-rows: 1fr;
       background-image: url("image2");
       background-repeat: no-repeat;
     }
  }


   <div class="bow">
      <div class="left">
        The info<br /><button>Download now</a>
      </div>
      
      <div class="right">
        <img alt="" src="image1" />
      </div>
   </div>

Answer 1

Put two image tags in with different classes then toggle display using your media query eg

  <div class="right">
    <img alt="" class="bigscreen" src="image1.png" />
    <img alt="" class="smallscreen" src="image2.png" />
  </div>

and for the css

.bigscreen {display:block;}
.smallscreen {display:none;}

@media only screen and (max-width: 800px) {
    .bigscreen {display:none;}
    .smallscreen {display:block;}
}