美文网首页
widthFix 宽度不变,高度自适应

widthFix 宽度不变,高度自适应

作者: 缘之空_bb11 | 来源:发表于2024-04-01 14:51 被阅读0次

在设置图片中,有种模式 mode="widthFix", 可以使图片在宽度不变,高度自动变化,保持原图的宽高比例,即设置图片的宽度而高度自适应.

但在实际的应用中会产生两个问题:

  1. 图片在初始加载时,会瞬间竖直拉伸变形闪烁后马上恢复正常宽高
    解决办法: height: auto;

  2. 多个图片时,图片中间会有空白间隙如图:

    WeChatba512d60bd998525c3300448a25ac412.jpg
    原因: inLine-block 水平呈现的元素, 换行显示时会有间距
    解决办法:
    直接外层包一层 flex 布局即可解决
{
display: flex;
flex-direction:column;
}

相关文章

网友评论

      本文标题:widthFix 宽度不变,高度自适应

      本文链接:https://www.haomeiwen.com/subject/yeritjtx.html