When we don’t have control over an image’s aspect ratio on a web page, it’s better to think ahead and provide a solution when a user uploads an image that isn’t aligned with the aspect ratio.
In the following example, we have a card component with a photo. It looks good.
When the user uploads an image of a different size, it will be stretched. This isn’t good. Look at how the image is stretched!
The simplest fix for that is to use CSS object-fit.
.card__thumb {
object-fit: cover;
}
img {
object-fit: cover;
}
Toggle Defensive
Learn more about object-fit in this article on Smashing Magazine.
此内容由惯性聚合(RSS阅读器)自动聚合整理，仅供阅读参考。 原文来自 — 版权归原作者所有。