CSS实现图片自适应缩放，填满容器

最新推荐文章于 2024-03-15 15:23:32 发布
最新推荐文章于 2024-03-15 15:23:32 发布
阅读量3.9k 收藏 5
点赞数 3
分类专栏： CSS 文章标签： css
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_43405938/article/details/119113580
版权

在项目中插入图片，
想按照图片比例自适应宽高缩放，填满容器
使用 object-fit: cover;即可实现

.goods_img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

<el-carousel v-if="details.picNums > 0" :interval="5000" arrow="always">
	<el-carousel-item v-for="item in details.pics" :key="item.pics_id">
		 <img class="goods_img" :src="item.pics_sma_url">
    </el-carousel-item>
</el-carousel>

效果展示

在这里插入图片描述
在这里插入图片描述

参考MDN： object-fit 属性

阿蓬2023
关注
  • 3
    点赞
  • 踩
  • 5
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
【css背景图片自适应】css怎么设置背景图片自适应大小
04-11
在css中，可以利用“background-size”属性设置背景图片自适应大小，该属性用于设置背景图片的大小，只需要给背景图片元素添加“background-size:cover;”样式，即可使背景图片的大小自适应。
CSS实现宽高等比自适应容器的方法
12-13
于是我们就需要实现一个 宽度自适应，高度为宽度一半的容器 。 这里先以高度为宽度一半为例，也可以是其他任意比例 。 一、思考如何实现 这个问题类似于：我们在移动端页面，上面有一张宽度 100% 的图片，如果我们没...
使图片按比例充满盒子
菜菜鸟的博客
04-18 3702
场景：使图片按比例充满盒子 一：css 设置最大宽高 max-width:100%; max-height:100%; 缺点：图片得大于盒子宽度高，如果小于盒子宽高，将无法填满 二：：使用css object-fit属性（推荐） height: 100%; width: 100%; object-fit: contain; 三：使用js控制图片大小（不推荐使用） ...
(转)css实现盒子高度随宽度等比例缩放的四种方式
最新发布
CaseyWei
03-15 651
前提：先去下margin,padding,方便看效果 *{ margin:0; padding:0 } 方法一：定位 css .container { background-color: silver; width: 100%; position: relative; display: inline-block; } .dummy { margin-top: 100%; } .content { position: absolut...
css让图片充满容器且不重复
我是没有梦想的小白
11-04 8183
首先声明一下我要实现的是无论图片所在的div宽和高为多少，都能保证图片充满整个容器。 background-size：100% 100%;---按容器比例撑满，图片变形； background-size：cover;---把背景图片放大到适合元素容器的尺寸，图片比例不变。 因此不能使用cover~~ 放代码！ .main .left{ background: url(../img/l...
css 如何让图片铺满整个容器，比例不变，且不被裁剪
weixin_39818813的博客
09-18 7595
.first-screen-modal{ //父容器 position: absolute; left: 0; top: 0; right:0; height: 800px; width: 600px; z-index: 100; margin: 100px 75px 306px 75px; .photo-bg{ //背景图对应的div background-image: url(images/rest.png); border-radius: 1.
css图片放大功能，且不溢出包裹盒子
m0_51354601的博客
04-13 4232
值得注意的是，当图片被放大到超过容器大小时，我们需要通过加上overflow: hidden;属性来防止图片溢出。此外，我们还可以通过添加过渡动画来使图片的放大效果更加平滑自然。使用transform属性定义鼠标移入时图片的放大效果。要实现图片在不溢出包裹的盒子内放大的效果，可以使用CSS3中的transform属性。这样就实现了图片在盒子内放大、不溢出的效果。
css设置图片在固定容器下高度铺满，宽度居中
itlsq的博客
02-19 1245
今日组员在调节图片自适应时遇到一个问题前来问我，就是无论什么比例的图片都要显示在固定容器里（图片的宽高一定会比容器大），不变形，说白了就是高度铺满，宽度居中显示，下面给出解决方案： <ul> <li><img src="../../assets/a1.png"></li> <li><img src="../../asse...
css 图片自适应宽度 CSS实现控制图片自适应显示宽度代码
12-13
这里利用CSS属性，使图片超过展示的宽度后，给图片设置显示最大的宽度。 假如用width属性强行设定显示尺寸似乎太不智能。幸好Firefox/Opera/IE7都提供了max-width属性支持。 假定希望图片显示宽度不超过500像素，...
CSS 实现高度自适应铺满整屏的实现
01-18
在自己写demo的过程中，想使用display:flex实现垂直居中，代码如下： <style> #login{ width:100%; height: 100%; display: flex; justify-content: center; align-items: center; } .login-body{ ...
css案例7——图片自适应盒子大小（不变形）
努力、拼搏、奋进
06-11 7773
图片保持比例填充、自适应、不变形
自适应实现盒子与背景图相等的宽高比例（给定盒子的宽，实现盒子的高自适应，根据背景图的宽高比例来确定）
weixin_42539854的博客
04-04 1787
自适应实现盒子与背景图相等的宽高比例 需求 给定盒子的宽，实现盒子的高自适应，根据背景图的宽高比例来确定 实现 利用background-size: 100% auto; 实现背景图的宽度根据盒子宽度自适应 利用给盒子添加伪类，伪类的高度根据盒子宽度和背景的宽高比例计算，由伪类撑开盒子的高度 .box { width: 100%; background-image: url(''); background-size: 100% auto; } .box::before { content: '';
容器已知宽高，图片宽高不定，图片填充满容器且不变形
前端小白的逆袭
12-02 1692
容器已知宽高，图片宽高不定，图片填充满容器且不变形
CSS让DIV按照背景图片的比例缩放，并让背景图片填充整个元素
u012632105的博客
10-25 1186
CSS让DIV按照背景图片的比例缩放，并让背景图片填充整个元素
响应式网页设计实战
阿蓬的个人博客
11-17 4206
1.设计思路 在本程序设计中，<header> 或 <footer> 元素不论在哪一种情况下，宽度总时浏览窗口宽度的100%， 当浏览窗口宽度小于480px为手机端，大于480px小于768px为opad端，大于768px为桌面端。 2.网页截图： 桌面端： ipad端： 手机端： 3.代码实现： test.html <!DOCTYPE html> <html> <head> <meta charset="utf-8">
Javascript 实现无缝切换/自动播放轮播图
阿蓬的个人博客
03-13 3172
一、功能需求 鼠标经过轮播图模块，左右按钮显示，离开隐藏左右按钮。 点击右侧按钮一次，图片往左播放一张，以此类推， 左侧按钮同理。 图片播放的同时，下面小圆圈模块跟随一起变化。 点击小圆圈，可以播放相应图片。 鼠标不经过轮播图， 轮播图也会自动播放图片。 鼠标经过，轮播图模块， 自动播放停止。 二、实现思路 1.整体分析 因为js较多，我们单独新建js文件夹，再新建js文件，引入页面中。 此时需要添加 load 事件。 鼠标经过轮播图模块，左右按钮显示，离开隐藏左右按钮。 显示隐藏 display 按
CSS3笔记(2)——盒子模型|多栏|定位|弹性容器
阿蓬的个人博客
11-05 1299
一、盒子模型 1. 构成 盒子模型由内容盒、内边距、边框和外边距构成 二、多栏布局 1. CSS3基本语法 一、定位与网页排版 1. CSS3基本语法 一、弹性容器 1. CSS3基本语法
CSS三大特性/盒子模型/浮动/定位/高级技巧
阿蓬的个人博客
03-04 547
一、VS code 快捷键 shift + Alt + down: 向下复制一行 Alt + z: 切换换行显示方式 shift + Alt + F: 格式化代码 shift + Alt: 选中多行 ctrl + g: 快速定位到某一行 二、Emmet 语法 ! + Tab .demo$*5 + Tab p{内容} + Tab 生成标签 直接输入标签名 按tab键即可 比如 div 然后tab 键， 就可以生成<div></div> 如果想要生成多个相同标签 加
css背景图片自适应
08-13
对于背景图片的自适应，可以使用 CSS 的 background-size 属性来实现。background-size 属性用于定义背景图片的尺寸。 有几个常用的值可以选择： 1. contain：将背景图片缩放至适应容器大小，保持图片的纵横比不变。这样可以确保整个图片都能完整显示在容器中，但可能会留有空白区域。 2. cover：将背景图片缩放至完全覆盖容器，可能会裁剪部分图片，但保持图片的纵横比不变。这样可以确保容器被完全填满，但可能会裁剪掉一部分图片。 示例代码如下： ```css .container { background-image: url("your-image.jpg"); background-size: contain; /* 可以改为 cover 或其他值 */ background-repeat: no-repeat; background-position: center; } ``` 在上述代码中，将容器的背景图像设置为 "your-image.jpg"，然后通过调整 background-size 属性来控制背景图片的自适应效果。根据具体需求，可以选择 contain 或 cover 值来实现适应效果。

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值