图片大小在不同浏览器中不一致

问题描述

我有一个问题，我的缩略图在 Firefox 中变得非常奇怪（可能对于 Chrome 中的某些用户）。对于我的每个映射项目，我都会显示一个大小为 240 x 220 像素的缩略图，但在 Firefox 中它们看起来像这样： Screenshot from Firefox

它应该是这样的： Screenshot from Chrome

我的代码如下：

replaceMap

还有这个：

const StoryThumbnail = styled.img`
  width: 240px;
  height: 220px;
  object-fit: cover;

  @media (max-width: 900px) {
    width: 100%;
    height: 350px;
  }
`;

有什么想法吗？我很感激所有的想法和意见。

附注。随意查看它在浏览器中的外观，并根据需要添加屏幕。 https://carolineborg.netlify.app/projects

解决方法

不要只设置 height 和 width，而是设置最小值和最大值：

const StoryThumbnail = styled.img`
  min-width: 240px;
  max-width: 240px;
  min-height: 220px;
  max-height: 220px;
  object-fit: cover;

  @media (max-width: 900px) {
    width: 100%;
    min-height: 350px;
    max-height: 350px;
  }
`;