如何使用媒體查詢更改不同屏幕尺寸的圖像？

Question

如何使用媒體查詢更改不同屏幕尺寸的圖像？ 我希望圖像 1 以 800px 顯示在桌面上，我希望圖像 2 顯示在較小的屏幕上。

下面是我的代碼：

 * {
  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

將兩個圖像標簽放入不同的類，然后使用您的媒體查詢切換顯示，例如

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

對於 css

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

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