zoukankan      html  css  js  c++  java
  • display:flex布局,防止图片被压缩flex-shrink: 0

    设置了固定宽高的图片被压缩

    通常实现如下的效果,是把外层容器设置为display:flex,容器中图片设置固定宽高度,右边元素设置为flex:1,但当右边元素宽度超出剩余空间的时候,图片会被挤压,变成椭圆形。

    这是因为在flex容器中,当空间不够的时候,flex-shrink不为0的元素会被压缩,所以解决的方法就是给图片设置:flex-shrink:0。

    .existCollages .row image {
    40px;
    height: 40px;
    border-radius: 50%;
    margin-right: 8px;
    flex-shrink: 0;/*防止被压缩*/
    }

     
  • 相关阅读:
    node03
    node02
    node01
    Vue-router重修02
    Vue-router重修01
    Vue重修02
    VUE重修01
    利用表达式目录树进行实体映射
    C#托管堆和垃圾回收
    C# 异步锁
  • 原文地址:https://www.cnblogs.com/fdxjava/p/14433140.html
Copyright © 2011-2022 走看看