用padding-top实现图片的自适应展示

时间:?2021-10-10阅读:?16标签:?图片

对于需要保持高宽比的图,应该用 padding-top 实现

原理

要使图片等比例展示,需要将图片宽度和高度以一个基准来计算。 padding-top用%单位时,表示占父元素宽度的百分比。基于此,将一个元素的高度用padding-top %表示时,就可以等比例展示一个元素。

等比例展示元素

比如,画一个宽高比为1:2的长方形,将元素的宽度设置为父元素的10%,将元素的padding-top 20%作为元素的高度。

<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>

html,body{
  padding: 0;
  margin: 0;
  font-size: 0;
}
div{
  display: inline-block;
  padding-top: 40%;
  height: 0;
  background: red;
  width: 20%;
}
div:nth-child(3n+1){
  background: blue;
}
div:nth-child(3n+2){
  background: yellow;
}


等比例展示宽高比

将图片放到,等比例展示的元素中,使用绝对定位,即可固定图片的宽高比。

 

https://codepen.io/denghuijie/pen/BadBgGY

<div>
  <img src="//iconfont.alicdn.com/s/c30bea48-04a8-4114-84bb-bb84ecfd05ba_origin.svg" >
</div>
<div>
  <img src="//iconfont.alicdn.com/s/6fe16527-0a9e-4c49-abb9-3d23bf695a19_origin.svg" >
</div>
<div>
  <img src="//iconfont.alicdn.com/s/c0541005-51e3-4b43-bc48-99910d00965d_origin.svg" >
</div>
<div>
  <img src="//iconfont.alicdn.com/s/c0541005-51e3-4b43-bc48-99910d00965d_origin.svg" >
</div>
<div>
  <img src="//iconfont.alicdn.com/s/c0541005-51e3-4b43-bc48-99910d00965d_origin.svg" >
</div>

html,body{
  padding: 0;
  margin: 0;
  font-size: 0;
}
div{
  display: inline-block;
  position: relative;
  padding-top: 20%;
  height: 0;
  background: red;
  width: 20%;
}
div:nth-child(2n+1){
  background: blue;
}
img{
  position: absolute;
  width: 100%;
  height: auto;
  left: 0;
  top: 0; 
}

总结

元素的高度用padding-top %单位表示,是指占父元素的宽度的百分比。宽度用%比表示,是指占父元素的宽度百分比。因此,元素的宽度和高度都是父元素宽度的百分比表示。从而当屏幕大小变化时,保持元素的宽度和高度比值不变。

作者:邓惠子本尊
链接:https://juejin.cn/post/7016939770316062733
来源:稀土掘金


站长推荐

1.云服务推荐: 国内主流云服务商,各类云产品的最新活动,优惠券领取。地址:阿里云腾讯云华为云

链接: http://www.pannellisolari.net/article/detial/10716

微信小程序动态设置图片大小

image有默认的固定的宽度和高度,这样我们在做图片自适应的时候,就不好做了,特别是我们在做一些商品详情页的时候,需要image自适应屏幕,按原图比例显示。那么如何让image自适应比例显示呢?

lazysizes.js使用方法_实现图片懒加载,延迟加载的js插件

当你的网站使用了大量图片时候,如果一次性全部加载,那么会严重影响网站的速度。通过lazysizes.js插件就能很好解决这个问题,它可以实现图片的延迟加载【懒加载】

jpg,gif,png,svg,bmp,WebP图像格式的区别以及应用场景

jpg:非常适合作为储存像素色彩丰富的图片,例如照片等等,png:分为 png-8 以及 png-24 两种格式,gif:非常适合用来表现图标, UI接口,线条插画,文字等部分的输出,也可用来展示小的动画。

原生Js对文件类型的判断,判断文件是图片,视频等格式

在我们开发中,会遇到这样的场景:1.服务器返回Json数据,根据数据类型来显示是图片还是视频。2.旺球体育在线上传文件,需要指定文件类型才能上传到服务器。这时候就需要使用Js来判断对应文件的类型

html5图片上传使用FileReader预览

通过FileReader,和es6的方法解构赋值,promise对象简单封装上传预览,具体逻辑:选中图片之后,触发onchange方法,获得上传文件对象,调用fileReader方法验证图片是否符合上传需求,符合返回图片文本,不符合返回错误信息。

旺球体育在线获取图片exif信息

对又是我,每天都有新的需求。这次的需求是上传图片的时获取图片的宽高,设备,光圈等信息。pc,android,ios 都支持了,现在就缺少 web 这边上传的图片了。

100多行代码实现js或者jquery版的类似juejin的预览图片功能

预览图片是一个很常用的业务功能,比如掘金的预览图片功能,下面我们就来模拟实现一个类似掘金的简单预览图片功能(PS:最终实现动画效果不如掘金,可自行扩展,还有就是嵌套的元素与掘金的方式也有区别)。

web旺球体育在线图片加载优化,从图片模糊到清晰的实现过程

在网页图片显示的时候,会发现许多网站采用了先模糊,然后在慢慢清晰的过程,这样的加载用户体验是比较好的,那么如何实现呐?默认加载2张图片,一张缩略图,一张原图,当打开网页的时候默认只显示缩略图

WPF 中如何创建忽略 DPI 属性的图片

WPF 框架设计为与 DPI 无关,但你依然可能遇到 DPI 问题。尤其是 Image 控件显示的图片会根据图片 EXIF 中的 DPI 信息和屏幕 DPI 自动缩放图片。对于 UI 用图来说这是好事

旺球体育在线解决第三方图片防盗链的办法 - html referrer 访问图片资源403问题

笔者网站的图片都是上传到第三方网站上的,比如 简书,掘金,七牛云上的,但是最近简书和掘金都开启了 防盗链,防止其他网站访问他们网站上的图片了,导致笔者的网站存在他们网站上的图片全挂了

点击更多...

内容以共享,参考,研究为目的,不存在任何商业目的。其版权属原作者所有,如有侵权或违规,请与小编联系!情况属实本人将予以删除!

Baidu