网站中什么尺寸的图片最合适
固定比例优先
当你的设计需要精确控制图片显示比例时(比如轮播图、产品展示图等),固定比例是最可靠的选择。
固定比例的盒子 + 非固定尺寸的图片
这个一般是用户上传图片然后展示的场景,常见于社交平台、电商商品展示等。以下是关键实现方案:
css
.fixed-aspect-box {
aspect-ratio: 16/9; /* 固定宽高比 */
overflow: hidden;
}
.fixed-aspect-box img {
width: 100%;
height: 100%;
object-fit: cover; /* 关键属性:保持比例填充容器 */
object-position: center; /* 控制裁剪重心 */
}
2.
图片使用object-fit: cover自适应填充
自由比例下的取舍
我们思考一下显示比率的问题,当想要在 4:3 的盒子里面放下 4:8 的图片,而图片没有拉伸压缩变形的话,就必然需要裁剪
而当我们的元素宽度跟随浏览器窗口变化时相当于宽度动态变化的盒子,所以还没办法使用 "4:3" 这样的固定比例来解决问题
这时就需要取舍了,究竟是裁剪左右更好还是裁剪上下更好,这取决于你要展示的主体内容。
所以我的想法是,当上下不能裁剪时就需要大宽高比(宽幅图片),当左右不能裁剪时就需要小宽高比(竖幅图片)
这样只要不是特别极端的宽高比变化(超出了我们提供的图片的安全范围阈值),都能保证主体内容不被裁剪。
实现方案
2.
图片使用object-fit: contain保证完整显示
一点小小的思考,欢迎评论指导,如果对您有帮助的话,也请点个小小的赞🎉