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

Question

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

它应该是这样的： Screenshot from Chrome

我的代码如下所示：

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

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

还有这个：

    {projects &&
          projects.map((project) => {
            return (
              <StoryWrapper key={project.title}>
                <StoryThumbnail src={project.thumbnail.url} />
......

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

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

Answer 1

不要只设置 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;
  }
`;

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

Image sizing not consistent in different browsers

css

image-size

reactjs

styled-components