实现图片的宽高比自适应

最新推荐文章于 2024-06-13 19:04:45 发布
最新推荐文章于 2024-06-13 19:04:45 发布
阅读量817 收藏
点赞数
分类专栏： vue开发问题解决 文章标签： vue.js stylus
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/weixin_54362381/article/details/119960772
版权

实现图片的宽高比自适应
1、【这种写法最标准】需要把height设为0、overflow设为hidden，然后通过padding-bottom来设置百分比就可以了。
overflow hidden
width 100%
height 0
老师的处理方式是，给容器设置高度为0，然后设置padding-bttom撑开高度。因为padding-bottom设置百分比是相对盒子的宽度计算的。例如在宽度为768px的设备下，padding-bottom的值就是768px乘以31.25%。375px的宽度下，就是375px乘以31.25%。即撑开的高度永远是根据宽度的变化而计算，不同设备下，盒子的宽高就相同了。
2、【这种写法可能有兼容性问题】
width 100%
height 31.25vw

stack君
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
CSS 实现的图片宽高自适应固定边框
09-25
以前的解决方法主要是利用js来实现，但用过的人都知道该办法有点繁琐。还有一种是在外部容器定义over-flow:hidden。但这种办法只会切割图片而不会自动适用。
CSS——图片自适应宽高
NanChen的博客
09-28 7044
宽度拉伸：把width设置成100%，height设置auto 高度拉伸：把height设置成100%，width设置auto ​ <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" con
如何使用css实现图片宽高自适应
判断一个点是否在闭合曲线内
12-06 1万+
本文主要是结合自己在学习中使用css来实现图片的宽高自适应，并给出相应的结局方案。 场景 给定一系列图片，图片宽高不等，每行所展示的图片数量不等，如何实现图片的自适应。 实现方法 聪明的你肯定会想到使用flex布局，并且设置flex-wrap: wrap。但如何做到自适应宽度呢： 我们假设图片原始宽度、高度分别为width、height，首先如果没有设置任何样式，那么图片高度肯定是不一样。于是......
css 图片自适应屏幕大小
最新发布
qq_33240556的博客
06-13 1147
通过使用max-widthobject-fit以及 Flexbox 等方法，你可以轻松实现图片自适应屏幕大小。这些方法可以单独使用，也可以结合使用，以满足不同的设计需求。
vue 实现图片宽度100%、高度自适应的效果
u013302168的博客
06-06 5340
2.在image组件上设置style属性，为图片设置高度自适应；可以使用CSS的height: auto属性来实现。1.在image组件上设置mode属性为widthFix，表示按照图片的宽度等比缩放，并保证图片宽度为100%。
Vue uniapp实现图片宽度100%、高度自适应的效果
qq_52099965的博客
03-26 1万+
Vue uniapp实现图片宽度100%、高度自适应的效果
图片展示实现高度、宽度自适应
qq_45228330的博客
04-04 2363
图片展示如何实现高度、宽度自适应？ 加入浏览器自适应功能后，浏览器宽度改变后，图片由于高度或者宽度固定，图片要么过宽、要么过高，样式很难看，想起max-height 和 max-width 这两个样式后，都好解决啦。 图片使用如下样式 .regulation-img { max-width: 90%; max-height: 140px; width: auto; height: auto } 效果如下 哪怕图片大小不一样也能实现布局的统一了。 ...
CSS实现的图片宽高自适应固定边框
09-25
以前的解决方法主要是利用js来实现，但用过的人都知道该办法有点繁琐。还有一种是在外部容器定义over-flow:hidden。但这种办法只会切割图片而不会自动适用。
微信小程序 图片宽高自适应详解
08-30
这种方法可以确保图片的宽度始终等于屏幕的宽度，从而实现图片的宽高自适应。 2. 使用 CSS 的视窗单位 CSS3 引入了视窗单位（vw 和 vh），它们基于窗口大小的宽度和高度，可以用来定义图片的宽高。 ``` .imgClass...
网络时空大数据爬取与分析DAS系统（街景图片采集与绿视率分析）
zhangjisong的博客
07-27 6567
手把手教 | 网络时空大数据爬取与分析DAS系统（街景图片采集与绿视率分析） 原创 DAS Team 双评价DAS 7月2日 地理计算语言，为大众赋能地理智慧。 ——DAS Team 爬取分析DAS系统下载 地址： https://pan.baidu.com/s/12MLx3vt-ctNPr6HZ3CumbA 提取码：3vxx Tips：目前的DAS系统支持ArcGIS 10.2-10.8、Word 2010以上的所有版本。 什么是街景图片 街景图片是一种实景地图服务，通过城市街道的360度全景图像为用户提
CSS 获取当前可视屏幕高度--使用calc()方法动态计算宽度或者高度
热门推荐
qq_39877681的博客
12-13 1万+
CSS 获取当前可视屏幕高度--使用calc()方法动态计算宽度或者高度
div或img图片高度随宽度自适应的方法
12-28
该方法主要用来做网站自适应的，同时可以实现撑起内容高度，避免图片加载后导致的页面滚动。 一、可以使用js判断图片的宽度得到具体数值之后，再来利用js设置图片的高度（这里就不具体为大家细说了）。 利用js来实现有一个缺点就是只能在页面刷新的时候才能调整图片的高度，不能随着浏览器的窗口大小变化来实现自适应。 二、我这次主要是用css来实现图片高度的自适应问题。 下面是所需要的代码 （这种方法是可以在图片上方垂直居中展示文字的，如果不需要可以选择最下方更简洁的代码） 行内元素垂直居中
padding-top 百分比黑知识
yongcheng0912的博客
03-19 862
width:100% height:0 padding-top:100% 撑开高度以宽度计算
css笔记（二）
qq_60587956的博客
01-24 1828
笔记基于尚硅谷菜鸟教程 目录 1. 文档流 2.盒子模型 2.1简介 2.2边框 2.3盒子的内边距 2.4盒子的外边距 2.5盒子在水平方向的布局 2.6盒子在垂直方向的布局 2.7外边距的折叠 2.8行内元素的盒模型 2.9浏览器的默认样式 2.10盒子的大小 2.11盒子的阴影轮廓和圆角 1. 文档流 我们认为网页是一个多层结构，是一层一层的 可以通过css为每一次设置样式 用户只能看到最上面的一层 我们称最下面的一层叫文档流，文档流是网页的基础 我们创建的元素默认..
子元素自动撑开父元素空间
qq_52317104的博客
10-13 2192
宽度 width !注意: 如果一个元素不添加width 属性，默认属性值为auto，不同的元素浏览器会根据其特点自动计算出实际宽度. 块级元素，其 width 属性的值会自动撑满父元素的 width 区域 注意：width用百分比比的是父元素的width，就是说若取100%，父元素无影响，尽量用px。 块级元素会独占一行，其宽度自动填满其父元素剩余宽度 行内元素，其 width属性的值是内部元素内容自动撑开的宽度。 < body >元素比较特殊，不需要设置 width 属性，宽度会自动适应浏
css 撑开宽度,纯css实现高度与宽度成比例展示
weixin_32515349的博客
08-03 544
最近在拿移动端项目练手的时候发现这样一个问题:在浏览器把图片加载出来以前，图片的高度是零，没办法把容器撑开，容器在图片加载前后都会有一个变型的过程，也就是俗称的“闪烁”，而如果图片加载不出来，整体布局就更是难看了。此时我们需要不靠图片本身就能把容器的高度撑开方可解决问题。在移动端，由于各机型分辨率相差太大，对图片是不能写死px值的，还是需要用百分比来实现自适应，因为容器宽高的参照物不一样，所以相对...
html图片高度撑开,CSS背景图撑开盒子高度
weixin_32123093的博客
06-17 1382
需求：给定1980px*1080px背景图，在网页显示时，图片宽度等于浏览器宽度，高度根据原图比例显示对应高度，假设图片最小宽度设置为1024px，则最小高度为1024/(1980*1080)=576px问题：背景图，是作为容器的一个属性存在的，并不是作为容器的内容，除了宽高padding这类以外的属性，其他的一般不能撑开容器，想要用这张图撑开容器的话，在现有知识下只能想到用img标签插入这张图，...
关于居中、子元素撑开父元素
weixin_43294560的博客
01-16 4324
实现父div宽高由内部元素撑开: 父div添加属性:overflow:hidden; 子元素定位时，无法撑开父元素，因为此时子元素已脱离文本流 实现任意元素垂直水平居中方法(单个居中同理): position:absolute; left:50%; top:50%; transform:translate(-50%,-50%); 移动元素自身高宽的一半，因为定位时元素有自身高宽 垂直居中......
前端小知识----如何100%宽度显示图片，高度自动不失真
06-29 4076
<!-- 我们将img css样式宽度设置为100% height为自动。 将overflow设置为hidden; imgbox不要给高度，设置为overflow:auto。图像就不再失真 请根据页面合理使用。。 --> .imgbox{overflo
vue 自适应宽高比
05-16
Vue 自适应宽高比是一种前端技术，用于实现在不同宽高比的设备上自适应显示图片或视频等元素，保持其原有的宽高比不变，不会出现变形或者拉伸的情况。 具体实现方式为，在外层容器设置一个固定的宽度和一个相对高度的百分比值，然后在内层容器中设置一个绝对定位的元素，并给这个元素设置一个固定的宽度和一个相对高度的百分比值，这样，内层容器中的元素就能够根据外层容器的宽高比自适应显示，并保持原有的宽高比不变。 例如，可以通过下面的代码来实现一个 16:9 的自适应视频播放器： ```html <div class="video-container" style="width:100%;height:0;padding-bottom:56.25%;position:relative;"> <div class="video-wrapper" style="position:absolute;top:0;left:0;width:100%;height:100%;"> <video src="video.mp4" style="width:100%;height:100%;" controls></video> </div> </div> ``` 其中，外层容器 `.video-container` 的 `padding-bottom` 属性设置为 `56.25%`，这是因为 `16:9` 宽高比的高度占宽度的 `56.25%`。内层容器 `.video-wrapper` 设置为绝对定位，并且宽高都设置为 `100%`，表示占据整个外层容器的空间。视频元素 `<video>` 的宽高也都设置为 `100%`，表示填充整个内层容器的空间。这样，无论在什么设备上播放，都能够自适应地保持 `16:9` 的宽高比。
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值