工作中遇到的一些CSS问题

1.img 显示固定部分，超过部分隐藏，不压缩，不变形

 

方法一：使用背景图

.bg_img{
    background: url("images/img1.jpg") center;
    background-size: contain;
}

方法二：使用img标签

img{
    object-fit: cover;
}

 

object-fit:
　　object-fit: fill;
　　object-fit: contain;
　　object-fit: cover;
　　object-fit: none;
　　object-fit: scale-down;

fill: 中文释义“填充”。默认值。替换内容拉伸填满整个contentbox,不保证保持原有的比例。
contain: 中文释义“包含”。保持原有尺寸比例。保证替换内容尺寸一定可以在容器里面放得下。因此，此参数可能会在容器内留下空白。
cover: 中文释义“覆盖”。保持原有尺寸比例。保证替换内容尺寸一定大于容器尺寸，宽度和高度至少有一个和容器一致。因此，此参数可能会让替换内容（如图片）部分区域不可见（上面讲解的例子就是如此）。
none: 中文释义“无”。保持原有尺寸比例。同时保持替换内容原始尺寸大小。

scale-down: 中文释义“降低”。就好像依次设置了none或contain, 最终呈现的是尺寸比较小的那个。　　

.content{
    -webkit-line-clamp: 2; //行数
    text-overflow: ellipsis;
    -webkit-box-orient: vertical;
    display: -webkit-box;
}

　　

3.CSS hover动画效果

(动画效果应加在本身的类上面，这样鼠标移入移出时都会有动画效果，且hover的变化要使用transform)

.content{
    transition: all 0.5s;
    &:hover{
        transform: translateY(-24px);
    }
}

4.使用antd的popup modal，并在modal中输入内容弹出软键盘时，安卓系统的页面内容会被挤压

 原因：antd的modal采用fixed布局
 解决方法：布局方式改为absolute，并给父元素设置：
 {
     min-height：480px; //兼容iPhone4高度
     position:relative;
 }