如何使不同大小的图像响应？

Question

我有两张在桌面上大小相同的图片，但在移动设备上高度不一样。如何在不设置特定高度的情况下在移动设备上保持相同的高度？

请在此处查看屏幕截图：https://imgur.com/a/agz5T2z。

这是我的代码 (ReactJS)：

HTML：

<div className="container beigeBackground">        
    <h1>Gallery</h1>
    <div className="homeGalleryContainer">
        <img src="https://images.pexels.com/photos/1449773/pexels-photo-1449773.jpeg?auto=compress&cs=tinysrgb&dpr=2&h=650&w=940" alt="Homepage Gallery 1"></img>
        <img src="https://images.pexels.com/photos/6341164/pexels-photo-6341164.jpeg?auto=compress&cs=tinysrgb&dpr=2&h=650&w=940" alt="Homepage Gallery 2"></img>            
    </div>        
    <button>GALLERY</button>
</div>

CSS：

.container {
  padding: 4em;
  background-color: rgb(240, 240, 240);
  display: flex;
  flex-direction: column; 
  align-items: center; 
  justify-content: center;
}
.beigeBackground {
  background-color: var(--Beige); 
  padding: 4em 2em; 
}                            
.beigeBackground * {
  color: white;
}
.homeGalleryContainer {
  display: flex;
  flex-direction: column;
  padding-top: 4em;
  padding-bottom: 3em;
}
.homeGalleryContainer img {
  width: 100%;
  margin-bottom: 2em;
  object-fit: cover;
}
.beigeBackground button {
  border-color: white;
}
.beigeBackground button:hover {
  background-color: white;
  color: var(--Beige);
}

@media screen and (min-width: 768px) {
  .beigeBackground {
    padding: 4em 0;
  }
  .homeGalleryContainer {
    flex-direction: row;
    padding: 4em 0;   
    padding-left: 2em;
      /* to balance out margin-right of each img */
    justify-content: center;
    align-items: initial; 
  }
  .homeGalleryContainer img {
    width: 40%;
    margin-bottom: 0;
    margin-right: 2em;
  }    
}

谢谢。

Answer 1

这将使 img 响应式

.homeGalleryContainer img {
  max-width: 100%;
  height: auto;
}