如何解决图片大小在不同浏览器中不一致
我有一个问题,我的缩略图在 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;
}
`;
版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 dio@foxmail.com 举报,一经查实,本站将立刻删除。