资讯专栏INFORMATION COLUMN

实现图片恒定宽高比的属性 — intrinsicsize

loonggg / 1317人阅读

摘要:开发中可能会遇到这样的需求一个响应式页面,它的图片宽度是随页面大小变化的,并且图片高度和宽度要保持固定的比率。

开发中可能会遇到这样的需求:一个响应式页面,它的图片宽度是随页面大小变化的,并且图片高度和宽度要保持固定的比率。(这里假设图片是

下面是对比,试着改变预览区大小,可以看到图片的变化是一样的
https://jsbin.com/zoxixiwefa/...

比较常用的场景是卡片式图片列表,比如下面是某直播平台的列表页,省略了一些CSS,分割线上是平台采用的padding方案,分割线下是用intrinsicsize属性实现。

https://jsbin.com/zazajazige/...

文章版权归作者所有,未经允许请勿转载,若此文章存在违规行为,您可以联系管理员删除。

转载请注明本文地址:https://www.ucloud.cn/yun/114784.html

相关文章

  • 前端通过background实现图片裁剪显示方法

    摘要:可以是真实图片路径或使用渐变创建的背景图像指定对象的背景图像位置。指定对象的背景图像显示的原点。 前端图片展示 在前端处理图片是非常常见的,而图片展示又存在一个最大的问题:适应,可以看看这种情况: 固定空间展示图片 空间是 100px100px,图片是 6060 空间是空间是 100px100px,图片是 160px240px 空间是空间是 100px100px,图片是 240px...

    Seay 评论0 收藏0
  • 前端通过background实现图片裁剪显示方法

    摘要:可以是真实图片路径或使用渐变创建的背景图像指定对象的背景图像位置。指定对象的背景图像显示的原点。 前端图片展示 在前端处理图片是非常常见的,而图片展示又存在一个最大的问题:适应,可以看看这种情况: 固定空间展示图片 空间是 100px100px,图片是 6060 空间是空间是 100px100px,图片是 160px240px 空间是空间是 100px100px,图片是 240px...

    xioqua 评论0 收藏0
  • 如何使用css来让图片居中不变形 微信小程序和web端适用

    摘要:被替换的内容将被缩放,以在填充元素的内容框时保持其宽高比。整个对象在填充盒子的同时保留其长宽比,因此如果宽高比与框的宽高比不匹配,该对象将被添加黑边。如果对象的宽高比与盒子的宽高比不匹配,该对象将被剪裁以适应。图片变形很多人祭奠出了妖魔鬼怪般的各种大法,比如使用jq来写,或者使用css表达式来写。今天我总结的是使用css3来写,唯一最大缺点就是对一些浏览器版本不够兼容。下面就是关于如何使用c...

    番茄西红柿 评论0 收藏0
  • [译]如何构建自己Progressive Image Loader

    摘要:最后,我们必须调用函数来检查所有的渐进式图片容器在首次运行时是否在页面上可见。我们还必须在滚动页面或调整浏览器大小时调用函数,在一些旧的浏览器主要指可以非常迅速地对这些事件作出回应,所以我们需要限制回调,以确保它不能在毫秒内被再一次调用。 你可以在Facebook和Medium上遇到过渐进式图片,当页面滚动到视图时,模糊的低分辨率图像会被清晰的全分辨率版本替换。 showImg(htt...

    cartoon 评论0 收藏0

发表评论

0条评论

最新活动
阅读需要支付1元查看
<