一看就会，超有用活字格技能：一百六十七、图文列表流动排列统一图片高度或宽度

收藏

本帖最后由 Simon.Sun 于 2023-1-5 10:23 编辑

一、案例来源
这边帖子来源论坛里两位格友的提问，和 experdot大佬给出的解决方案，咱只是个搬运工。帖子的内容我放到文末的参考连接。
简单说下背景，使用图文列表展示图片，但不做特殊设置的情况下，图片单元格中的图片大小会议 contain 的方式进行填充——保持原有尺寸比例，长度和高度中短的那条边跟容器大小一致，长的那条等比缩放，可能会有留白。也就是会出现下面这样的效果：
image.png110788573.png

那么怎么消除这些空白呢？
二、解决方案
为了是图文列表中图片的行高保持一致，解方案如下：
1. 将图文类别模板页面中的图片单元格的所有列设置为自适应模式，并设置类名 autofit-image：
image.png993171997.png

2. 图文列表单元格设置为按行流动：
image.png107616271.png

3. 工程文件引入 CSS，CSS 如下：

.autofit-image img{
position:relative;
}

复制代码

到此设置完毕，运行效果如下：
image.png206289977.png

另外一个案例和这个有点类似，原始需求是格友这边有一个很长的图片，为了加快图片的加载速度，格友将图片裁剪成了几段，然后想在页面上使用图文列表展示完整图片。解决思路和这个类似，不过这次不是实现高度自适应而是实现宽度自适应。为此这次需要设置图片单元格的全部行高为自适应：
image.png817970275.png

后面的操作步骤就和上面案例的设置类似了。
实现的效果如下：
image.png750022582.png

三、参考连接
这里给出原贴的链接和相关 demo。关于这个场景，格友们如果有更好的方案，欢迎发帖交流

。

图片高度固定.zip (675.55 KB, 下载次数: 155)

		自动登录	找回密码
密码			立即注册

[易学技巧] 一看就会，超有用活字格技能：一百六十七、图文列表流动排列统一图片高度或宽度

0 个回复

Wyn高级认证

Wyn认证

活字格认证

活字格高级认证