css实现图片的自适应裁剪

最新推荐文章于 2024-07-05 09:52:23 发布

薛中然

最新推荐文章于 2024-07-05 09:52:23 发布

阅读量3.1k

点赞数 2

分类专栏： CSS3

本文链接：https://blog.csdn.net/sinat_36729274/article/details/96972775

版权

这篇博客展示了如何利用CSS实现图片的自适应裁剪。通过设置`<img>`标签的宽度、高度和`object-fit`属性为`cover`，可以确保图片在不同尺寸的容器中都能保持合适的比例填充，实现视觉上的自适应效果。

摘要由CSDN通过智能技术生成

<!DOCTYPE html>
<html>
   <head>
       <meta charset="utf-8" />
       <meta name="viewport" content="width=device-width, initial-scale=1">
       <title></title>
   </head>
   <style type="text/css">
       ul,li{
           list-style:none;
           margin:0;
           padding:0;
       }
       .list{
           width:375px;
           box-sizing:border-box;
           display: flex;
           justify-content: space-between;
       }
       .list-item{
           overflow: hidden;
       }
       img{
// width:100%;