图片是部署后手机上的原始尺寸答案

【问题标题】：The image is taking the original dimentions of it on the phone after deployment图片是部署后手机上的原始尺寸
【发布时间】：2022-06-10 22:35:58
【问题描述】：

所以我完成了我的响应式网站的编码并将其部署到网络上，但我面临一个我真的没有找到答案的奇怪问题。我正在使用 react js，并使用标签将一些图像上传到我的网站，并添加了一些 css 网格。但我面临的问题是，当我从手机打开网站时，图像采用其原始高度尺寸，而不是我在 css 文件中添加的尺寸。奇怪的是图像在电脑屏幕上工作得很好，即使我检查网站并缩小屏幕它工作得很好。此外，我通过检查网站尝试了谷歌浏览器上的手机尺寸功能，但它也运行良好。它只是没有显示图像的正确尺寸，而是在我将图像上传到我的文件时遵循图像的原始尺寸。

注意：宽度是正确的，但高度不是。我在 Vercel 上托管了我的网站

以下是图像的外观和应有的样子。

enter image description here enter image description here

我的 Js 文件：

const Memory = () => {
  return (
    <div id="finally">
      <div id="sa">
        <div class="card" id="MyCards">
          <div class="card-body" id="ToTheLeft">
            <h5 class="card-title">Ottawa, Canada</h5>
            <p class="card-text">September 2nd, 2021</p>
          </div>
          <Image className="M1" src={Sep2} alt="Memory1"></Image>
        </div>
      </div>
    </div>

css文件：

#finally {
  text-align: center;
}
#MyCards {
  position: center;
  margin: 16px;
  text-align: left;
}

#ToTheLeft {
  height: 65px;
  text-align: left;
}
#sa {
  text-align: center;
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
  /* grid-template-columns: repeat(2, 350px); */
  grid-row: auto;
  grid-column-gap: 60px;
  grid-row-gap: 50px;
  margin-left: auto;
  margin-right: auto;
}
@media (min-width: 960px) {
  #MyCards {
    flex-basis: 50%;
  }
}
@media (max-width: 960px) {
  #sa {
    display: grid;
    grid-row: auto;
    flex-basis: 50%;
    grid-row-gap: 50px;
    grid-template-columns: 1fr;
  }
}

如果您需要更多信息，请告诉我。

我真的无法在网上找到任何东西，所以非常感谢您的帮助

谢谢！

【问题讨论】：

问题是你的图片没有正确设置高度。
你不能设置位置：center;
是的，高度是个问题。是的，我刚注意到。那么位置：中心是问题所在？
将高度固定为 200px 就可以了
不，那没用。它甚至使它变得更糟。另外，我真的不明白为什么 200px 而不是 65px ....

标签： html css reactjs mobile deployment