注册
登录

自适应图片尺寸解决方案

html+css / 发布于 2年前 / 更新于 2年前 / 本文字数: 1.43k 字

标签： 自适应图片 / 图片响应式 / css 图片自适应

图片的自适应解决方案

我们在移动端或者是PC端的时候，我们在做响应式的时候，图片经常需要用到响应式，为了保证图片能够完整显示出来，这里推荐一种百分比的设计思路，通过图片的比值来确定我们设置的百分比。
首先我们来看下几个场景
黑白课堂
黑白课堂
黑白课堂
例如京东这个列表，图片可以根据不同的屏幕尺寸来确定大小。京东它是通过改变图片的尺寸大小来设置，这种其实不太好，毕竟你要去计算总平面大小，这里我们不推荐，只是我们作为一个自适应的参考。

通过实践，我们可以通过 padding-bottom 来设置一个 占位值,这个占位值怎么计算呢，很简单，根据图片显示的大小比例(高/宽)，例如；

  • 190x190px ,那么我们可以设置padding-bottom:100%,
  • 500x300px,,那么我们可以设置padding-bottom:60%

例子演示
黑白课堂
黑白课堂
将图片设置位绝对定位，然后宽高100%。

<div  class="img">
    <img  src="https://img13.360buyimg.com/mobilecms/s372x372_jfs/t1/182679/14/9324/388107/60c8ddabEced0a479/11ff036209cabb57.jpg!q70.dpg.webp" alt="">
</div>
.img{
    padding-bottom: 100%;
    position: relative;
}
img{
    width: 100%;
    height: 100%;
    vertical-align: top;
    -webkit-border-radius: 0.1rem 0.1rem 0 0;
    border-radius: 0.1rem 0.1rem 0 0;
    position: absolute;
    left: 0;
    top: 0;
}

这样我们在任何屏幕尺寸下，都能自适应的图片大小，不需要通过计算来设置图片的 px 值，这个最简单，也比较实用，也是最好用的解决方案

评论区 (0)

没有记录
支持 markdown,图片截图粘贴拖拽都可以自动上传。
哪吒

哪吒 · 中级学士

热爱技术，喜欢新东西。

老程序员年度分享MVP
查看更多

最新视频教程

查看更多

最新视频课程

热门文章

热门文档

Laravel 消息通知使用

ace.js 打造一款属于你的 Web 编辑器，入门文档。

Laravel 实现 RBAC 权限管理功能 Permission 包操作

微信小程序等比例图片压缩上传，100%可用，非官方压缩方法

宝塔面板强制绑定账号修改为不强制绑定方案

wap2App 入门讲解，100%速成，全面为你讲解。

Laravel 设置请求头 header 参数

Laravel 的 PhpSpreadsheet 包入门

Laravel 表格操作 Maatwebsite/Laravel-Excel 3.1 最新版本的操作指南

Linux 下如何监听我们的脚本是否掉线了

查看更多

KongQi Laravel Admin2.0 文档安装

KongQi Laravel admin2.0 layui admin 版本序言

易语言入门拖入文件导入到超级列表框表格内

易语言入门易语言定时任务模块

postman 使用手册cookie 使用

谷歌浏览器插件教程proxy 代理

易语言入门判断文件夹是否存在的方法

易语言入门TAB 标签页制作

Visual Studio Code 入门和使用教程插件安装使用

Visual Studio Code 入门和使用教程安装下载

查看更多

订阅会员

类型:
金额:
立即购买

购买学币

学币:
金额:
立即购买

选择支付类型

支付宝电脑支付
微信支付扫码
支付宝扫码支付
立即支付