css实现图片的自适应裁剪

最新推荐文章于 2025-06-17 03:24:13 发布
原创 最新推荐文章于 2025-06-17 03:24:13 发布 · 3.2k 阅读 · 0 ·
CC 4.0 BY-SA版权
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。

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

摘要生成于 C知道 ，由 DeepSeek-R1 满血版支持， 前往体验 >

<!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%;

            width:200px;//需要定宽
            heigth:300px;
            object-fit:cover
        }
    </style>
    
    <body>
        <ul class='list'>
                <li class='list-item'>
                        <img src="http://a.hiphotos.baidu.com/image/pic/item/e61190ef76c6a7efcefee3c3f3faaf51f2de667e.jpg" />
                </li>
        </ul>
        <ul class='list'>
                <li class='list-item'>
                        <img src="http://a.hiphotos.baidu.com/image/pic/item/e61190ef76c6a7efcefee3c3f3faaf51f2de667e.jpg" />
                </li>
                <li class='list-item'>
                        <img src="http://f.hiphotos.baidu.com/image/pic/item/a71ea8d3fd1f4134d244519d2b1f95cad0c85ee5.jpg" />
                </li>
        </ul>
        <ul class='list'>
                <li class='list-item'>
                        <img src="http://a.hiphotos.baidu.com/image/pic/item/e61190ef76c6a7efcefee3c3f3faaf51f2de667e.jpg" />
                </li>
                <li class='list-item'>
                        <img src="http://f.hiphotos.baidu.com/image/pic/item/a71ea8d3fd1f4134d244519d2b1f95cad0c85ee5.jpg" />
                </li>
                <li class='list-item'>
                        <img src="http://b.hiphotos.baidu.com/image/pic/item/32fa828ba61ea8d3fcd2e9ce9e0a304e241f5803.jpg" />
                </li>
        </ul>
        <ul class='list'>
                <li class='list-item'>
                        <img src="http://a.hiphotos.baidu.com/image/pic/item/e61190ef76c6a7efcefee3c3f3faaf51f2de667e.jpg" />
                </li>
                <li class='list-item'>
                        <img src="http://f.hiphotos.baidu.com/image/pic/item/a71ea8d3fd1f4134d244519d2b1f95cad0c85ee5.jpg" />
                </li>
                <li class='list-item'>
                        <img src="http://b.hiphotos.baidu.com/image/pic/item/32fa828ba61ea8d3fcd2e9ce9e0a304e241f5803.jpg" />
                </li>
                <li class='list-item'>
                        <img src="http://e.hiphotos.baidu.com/image/pic/item/4610b912c8fcc3cef70d70409845d688d53f20f7.jpg" />
                <li>
        </ul>
    </body>
</html>

CSS - ＜img＞ 图片裁剪 object-fit 属性，指定图片应该 “如何去适应“ 容器的高度与宽度（详细示例代码）
资深程序员
05-16 3759
关于标签，图片的裁剪属性，img标签的object-fit属性，原生img标签 object-fit，img 图片裁剪模式，通过css实现img自适应剪裁并居中适配，img object-fit属性实现图片自动裁剪不被拉伸，img元素实现图片裁切，img标签的object-fit属性，使用img标签自适应，各个尺寸图片不变形，关于img元素及object-fit属性使用，css3-img新属性object-fit，object-fit: cover;怎么用，css实现不定宽高的图片img居中裁
css图片自适应裁剪
weixin_42707543的博客
08-04 565
object-fit: cover; width: 10em; height: 10em;
CSS3 背景裁剪：background-clip 的创意用法
最新发布
小白菜的博客
06-17 1580
本文旨在帮助前端开发者和设计师彻底掌握的核心用法，不仅讲解基础概念，更重点拆解其在文字特效、边框设计、不规则图形等场景中的创意应用。无论您是 CSS 新手还是资深工程师，都能从中找到启发。本文将按照“基础原理→核心概念→创意用法→实战案例→注意事项”的逻辑展开，先通过生活比喻建立直观认知，再结合代码和效果演示具体操作，最后总结常见问题和未来趋势。背景裁剪（Background Clipping）：控制背景图像或颜色显示范围的技术，超出裁剪区域的部分会被隐藏。CSS 盒子模型（Box Model）
CSS实现图片裁剪居中（只截取剪裁图片中间部分，图片不变形）
weixin_48596030的博客
07-05 2382
CSS实现图片裁剪居中（只截取剪裁图片中间部分，图片不变形）
Css实现图片裁剪居中（图片不变形）
滴水石穿
05-31 743
在需要展示多张图片的时候，图片大小有时候可能会不一样，一般设置图片宽度自适应，那么高度就会根据图片本身的宽高比等比缩放，那么问题来了，多张图片的宽高比可能本身并不相同，那么造成图片宽度一样，高度不一样，显示不好看，不协调。如下：为了避免变形，我们可以使用css中object-fit属性object-fit CSS 属性指定可替换元素的内容应该如何适应到其使用的高度和宽度确定的框。实现代码html部分。
如何让图片按比例响应式缩放、并自动裁剪的css技巧
热门推荐
onlyhom's notebook
01-18 6万+
如何让图片按比例响应式缩放、并自动裁剪的css技巧同时也适用于一些轮播父容器响应式缩放响应式网站、移动端页面在DIV CSS布局中对于图片列表或图片排版时， 如果想要图片按比例缩放， 最简单的就是把img宽度设为100%， 不设置高度，高度就会自动跟着高度缩放但是如果要达到的效果是，要让图片的宽高要按一定的比例显示，如1：1 、4：3 等， 然而图片尺寸不是这个比例，又不想让图片拉伸变形，自
使用CSS实现图片自适应
CSS（层叠样式表）提供了多种方法来实现图片的自适应显示，确保图片能够在不同设备和分辨率下适配。以下是一些关于CSS强制图片自适应大小的关键知识点： 1. **百分比单位**： CSS中，可以将图片宽度设置为百分比值...
CSS实现自适应的图片背景边框
11-24
综上所述，实现CSS自适应的图片背景边框涉及的关键技术包括`background-size`、媒体查询、伪元素以及适当的布局技巧。通过灵活运用这些工具，我们可以创建出无论在何种设备上都能优雅呈现的图片边框效果。这不仅提升...
CSS实现网页背景图片自适应全屏的方法
12-09
为了适应不同设备的屏幕尺寸，并保证图片不因拉伸而失真，我们需要使用CSS来实现背景图片的自适应全屏显示。本文将详细解析如何通过CSS来达成这一目标。 首先，我们需要在HTML中创建一个div元素作为背景图片的容器...
实现图片自适应裁剪的JS插件下载
知识点一：图片裁剪功能的实现原理 1. HTML和CSS用于创建用户界面和布局，显示图片预览及裁剪区域。 2. JavaScript用于处理用户的交互事件，如鼠标拖动以选择裁剪区域、调整裁剪框大小等。 3. 裁剪算法通常涉及对...
CSS背景图片自适应技巧详解
3. 实现背景图片自适应时可能出现的问题及解决方案：当背景图片设置为“cover”时，图片可能会被裁剪，导致某些重要部分无法显示。一个常见的解决方案是使用一个较大的图片作为背景，并确保图片的重要部分位于图片的...
html 图片自动裁剪,如何用CSS自动裁剪图片 - Thomas'博客
weixin_33835368的博客
05-31 1034
width:100%;height:0;padding-bottom:100%;overflow:hidden;background-position:centercenter;background-repeat:no-repeat;-webkit-background-size:cover;-moz-background-size:cover;background-size:cover;...
CSS图片剪切
如雨随行的博客
09-18 9957
如何让控制图片显示的尺寸 在网站设计中，有时候会遇到对一张图片做多处使用，而每处显示的尺寸又不一定都一样，在传统作法中，需要根据不同尺寸 设计不同的图片。不过利用css，能够很好解决这个问题。 一、直接设置图片的width，height，或者直接改变图片的长宽比例 虽然简单方便，但是会引起图像显示效果问题。因为浏览器不能像ps那样对图像以相对尺寸进行缩放运算，实际显示虽然简单方便，但是会引起图像显...
CSS剪切图片
Jie
04-12 1199
 示例图片：width:197px   height:87px                CSS剪切图片 <!-- #img1 { position:absolute; clip:rect(30px 80px 60px 20px);
CSS剪裁图像
知行合一，学以致用！
04-19 2654
http://www.w3school.com.cn/cssref/pr_pos_clip.asp
css 剪辑图片_css实现图片剪裁
weixin_39929096的博客
12-21 2920
也许，你会遇到这样的情况，UI给你一张图片，然而根据实际情况，比如需要适配XXX手机，或者需要把图片形状搞好看一点，会让前端人员进行图片剪裁工作。现在我们就已这个例子来对图片进行剪裁html代码如下 css代码如下.img-container {width: 300px;}.img-container img {width: 100%;}图片下面进行剪裁现在的需求是这样的：原来尺寸是wi...
CSS图片裁剪Clip
xiaozhen0610的博客
08-06 515
CSS Clip 裁剪 可以用它来裁剪一张图片噢。 我们来裁剪一下Google图标，把G字给裁剪下来。 注意这个clip得配合绝对定位才能使用，不然不起效果。 rect (top,right,bottom,left) 上，右，下，左 啥意思呢，比如说上面的clip:rect(0 140px 140px 0);这句话就表示我要裁剪一个从高0px到底部140px，从左0px到右140px像素的图像。（更简单来说就是我要裁剪一个高140像素宽140像素的图像。不过这句话再某些情况下还不太正确，所以...
教你如何利用css来裁剪图片
github_37125043的博客
12-22 4725
突然想到了之前整理的图片裁剪插件，想了下实现的三种原理，下面就写一下简单的例子： 背景定位 代码块 clip切割 代码块 position定位 代码块由于只是简单说了下实现原理，网上也有很多插件，但是UI的设计不一，所以对于全面的实现效果并没有体现。 背景定位 利用背景定位来实现裁剪效果 代码块css：div{ width: 300px; height: 300px;
css图片剪裁居中
西洲
06-26 2万+
最近工作遇到一个新的css属性object-fit工作使用场景： 列表显示图片的时候，一般设置图片宽度自适应，那么高度就会根据图片本身的宽高比等比缩放，那么问题来了，多张图片的宽高比可能本身并不相同，那么造成图片宽度一样，高度不一样，显示不好看，不协调。如下图，图1和图2.怎么才能实现图片居中剪切，避免图片变形呢，css属性object-fit就可以实现实现代码：注意：只是简单的用pc做了个d...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值