请马上登录,朋友们都在花潮里等着你哦:)
您需要 登录 才可以下载或查看,没有账号?立即注册
x
本帖最后由 马黑黑 于 2022-1-29 11:17 编辑
装载图片的box,也就是图片容器,如果设定了固定的高宽尺寸,其内的图片可以自适应高宽吗?
答案是:可以,但要付出牺牲。 最简单的方法是给 img 设置 100% 的 width 和 height,这样图片会铺满容器,缺点是图片可能会变形——当图片自身的高宽比例与容器的高宽比例不一致时。 最传统的方法是让图片以做容器的 background-image 出现,容器的 background-size 可以设置为 cover,如以下的简化写法: background: url('图片地址') no-repeat center/cover; 同等于: background-image: url('图片地址'); background-position: center center; background-repeat: no-repeat; background-size: cover; 以上这样的设定,可以保证图片铺满容器,并保证图片不会变形,效果为图片的高度和宽度有一样按比例给出完整的内容,另一样则会被裁减掉一部分。若用 contain 取代 cover,则图片是完美的,但容器或是横向或是纵向会留白,除非图片的高宽比例等于容器的高宽比例。 最新潮的方法用 object-fit 属性,与背景图相比,object-fit属性设定直接作用于 img 标签,并能让爬虫搜索到图片。记住,和上面代码示例一样,图片的容器是固定高宽尺寸的,我们的代码省略了这个设置: object-fit: cover; /* contain */ object-fit 和背景图片的用法差不多,也是 cover 和 contain 等值,意义与效果也没有区别。 还有其他方法,但都不可能十全十美,要么图片变形,要么部分被剪裁,要么容器留白。但这些方法仍然有使用价值:当无可选择的时候,总有一个参数是相对合适的。
|