图片压缩问题解决方案

原创已于 2024-01-02 11:47:19 修改

· 494 阅读

6 ·

版权

文章标签：

#前端 #css3

于 2023-12-14 11:52:22 首次发布

图片压缩问题解决方案

为了让图片在不同的屏幕上面实现自适应的效果，此时只需要给图片宽度，高度会自适应，代码实例如下所示：

 .welcome-layout {
   position: relative;
   width: 100%;
   border-radius: 8px;
   > img {
     width: 100%;
     height: auto;
   }
   .welcome-wrap {
     position: absolute;
     top: 50%;
     left: 72px;
     transform: translateY(-50%);
     display: flex;
     flex-direction: column;
     color: white;
   }
   .welcome-text {
     font-size: .37rem;
   }
   .welcome-time {
     margin-top: .1rem;
     font-size: .21rem;
   }
 }