如何简单实现响应式式图片等比例缩放

于 2018-01-23 16:38:28 发布
阅读量7k 收藏 6
点赞数 4
分类专栏： 前端就那么回事 文章标签： CSS3 a
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_38209578/article/details/79141561
版权
前端就那么回事 专栏收录该内容
122 篇文章 23 订阅 ¥19.90 ¥99.00
订阅专栏
本文介绍了如何利用CSS3的background-size属性实现响应式图片等比例缩放，详细讲解了基本语法，包括length、percentage、cover和contain的用法，并通过padding-top、background-size:cover和background-position: center的组合应用，解决图片预加载时的高度塌陷问题。
摘要由CSDN通过智能技术生成

Tips:本文主要介绍CSS3的background-size属性，实现响应式式图片等比例缩放。

（一）基本语法

基本语法：background-size: length | percentage | cover | contain; （可参照w3c的为准）

  • length
    该属性值是设置背景图像的宽度和高度的，第一个值是宽度，第二个值是设置高度的。如果只设置第一个值，那么第二个值会自动转换为 “auto”;

  • percentage
    该属性是以父元素的百分比来设置图片的宽度和高度的，第一个值是宽度，第二个值是高度。如果只设置一个值，那么第二个值会被设置为 “auto”;

  • cover
    把背景图像扩展至足够大，以使背景图像完全覆盖背景区域。

  • contain
    把图像扩展至最大尺寸，以使宽度和高度 完全适应内容区域。
    ####（二）实现原理
    1.padding-top
    padding-top = （高度 / 宽度 ）＊ 100% ＝ （1600／ 2560）＊ 100%

了解本专栏 订阅专栏 解锁全文
吴维炜
关注
专栏目录
订阅专栏
博客
认识大前端，开启无限可能
11-05 1万+
万丈高楼平地起。开课第一周，我们将以轻松幽默的方式，从实际工作中的开发痛点出发，以项目全生命周期为主线，对全栈有全局的认识。从整体项目分析开始，培养项目架构思维。一、了解大前端知识体系，有全局的认知1.1 工程师的技能树在大前端知识体系中，每个阶段的工程师，需要有不同的知识技能储备。江湖封号程序猿（媛），业内一般称呼软件开发工程师。1.1.1 初级工程师初级前端工程师的标准，就是能够完成日常的功能开发和debug，可以在已有的代码基础上做修改，优化和维护；熟练使用平时开发需要用到的工具即.
博客
你想成为什么样的人，你就要以什么样的标准来要求自己
09-03 5769
梦想还是要有的，没有梦想跟咸鱼有什么两样慎重的考虑了，最后给自己一个阶段的小目标——“前端第一人”主要职责： 1.准确理解产品需求、交互文档或原型, 进行 web 产品前端开发； 2.优化用户体验，修正项目中出现的问题； 3.与设计美工配合完成页面的静态化； 4.参与用户相关交互设计，配合后台开发人员，完成页面的交互功能，联调工作；自我要求： 1.精通 div+css......
博客
「AIGC」AI设计工具LensGO
10-24 43
LensGo 也是目前正在快速增长的 AI 视频生成平台中的一员，虽然平台官方并没有将背后所用的大模型公布出来，但是从生成效果来看，也是基于头部的几个大模型 搞出来的东西。在功能上，LensGo 支持视频内容的风格转换，文生图，文生视频，图生视频，也能微调和训练自己的模型，功能该有的都有。定位：文本到图像生成、文本到视频动画、视频转视频、视频风格迁移、风格定制、用户友好界面（限制：18种风格10秒）
博客
「AIGC」AI设计工具 v0.dev
10-24 211
20学习前端代码本身似乎并不复杂，但是有平台能够直接生成代码、预览效果，似乎更有性价比。可能对于有前端和开发经验的同学而言，直接实现某个页面效果并不算是太复杂的事情，但是对于没有代码经验的同学而言，直接使用 AI 跑出代码甚至直接落地成为可以运行的程序还是非常有意义的。
博客
「AIGC」AI设计工具Polymet
10-24 337
是一个 Y-Combinator 投资的一个 AI 平台，它和我们之前所用到的很多 AI 工具有着明显差别，它有着更强的指向性——成为 AI 产品设计师和 AI 前端。Polymet 可以根据提示词描述来生成数字界面内容，根据自然语言生成我们所熟悉的、可交互的数字界面，这也意味着在要求不高的情况下，一部分有需求的用户甚至可以借助它直接跳过设计师，拿到前端代码，让产品进入调整、测试和应用的阶段，起码在数字产品的早期阶段，快速原型的搭建和测试，几乎可以不需要进行界面设计了。
博客
「UCD」ComfyUI设计提效工具
10-22 37
ComfyUI 支持自定义节点插件，这些插件可以大大增强 ComfyUI 的功能和使用体验。
博客
「AIGC」n8n AI Agent开源的工作流自动化工具
10-22 430
n8n AI Agent在工作流中直接使用 JavaScript 或 Python 代码，以实现高度定制的逻辑。
博客
「UCD」用户体验设计专家
08-23 945
评估产品的用户体验（User Experience, UX）是一项多维度的工作，要考虑用户在使用产品时的各个方面，包括易用性、满意度、效能和可访问性等。虽然没有单一的评估方法可以全面覆盖所有维度，但通过结合定量和定性的方法，可以获得更全面的评估结果。通过创建详细的用户画像，设计师和开发团队可以更好地理解目标用户的需求、行为和痛点，从而更有针对性地设计产品功能与界面。结合出问题的位置进行可用性测试，以找到并修复痛点。综合这些评估方法，你可以得到比较全方位的数据支持和定性的洞察，从而不断优化你产品的用户体验。
博客
「Vue组件化」封装i18n国际化
07-18 531
在Vue应用中实现国际化（i18n），通常需要使用一些专门的库，比如vue-i18n。本文主要介绍自定义封装i18n，支持Vue、uniapp等版本。
博客
「Vue组件化」封装SVG图标
07-18 378
首先创建一个用于加载SVG文件的Vue组件。将SVG文件放在项目的某个目录下，例如components/svgIcon/。创建一个函数来动态导入SVG文件，并注册到Vue组件中。在项目中通过组件标签使用SVG图标。
博客
「Conda」在Linux系统中安装Conda环境管理器
07-15 491
在Linux系统中安装Conda环境管理器是一个相对简单的过程。
博客
「Python」基于Gunicorn、Flask和Docker的高并发部署
07-15 927
参数确保使用最新的Dockerfile重新构建镜像。这个命令会构建Docker镜像并启动服务。，来模拟高并发请求并测试应用的性能。（Apache Bench）或。使用压力测试工具，如。
博客
「UCD」用户体验设计
07-11 301
用户体验设计是产品设计的心脏，它跨越多个学科，包括界面设计、信息架构、人机交互等，以确保最终产品能够提供卓越的用户体验。UX设计不仅关注产品的功能性和美观性，还关注产品如何与用户进行有效沟通，以及如何在竞争激烈的市场中突显其品牌价值。
博客
「UCD」浅谈蓝湖Figma交互设计对齐
07-11 526
在现代数字产品的设计和开发过程中，选择合适的工具对于提高团队效率和保证产品质量至关重要。本文将从开发和设计两个不同的角度，探讨蓝湖和Figma两款流行工具的优势与不足，并提出结论和建议。
博客
「AIGC」“AI+作业”，是辅助还是颠覆
07-09 197
总的来说，"AI+作业"目前更多地被视为一种辅助手段，它为教育领域带来了许多积极的变化和可能性。然而，我们也应注意到它可能带来的挑战，并采取措施确保技术的健康发展和应用，避免对教育的本质造成负面影响。例如，通过制定合理的教学策略，平衡技术使用和传统教学方法，以及确保所有学生都能公平地获得AI辅助学习的机会。"AI+作业"指的是将人工智能技术应用于作业辅导和学习过程中，这可以包括个性化学习计划、自动化作业批改、智能辅导和推荐学习资源等功能。
博客
「AIGC」使用AI集成工具提升工作效率
07-09 301
使用AI集成工具提升工作效率的一个实际例子是通过自动化数据分析和生成报告。以下是一个更丰富的示例，我们将构建一个简单的Python脚本，使用pandas进行数据分析，matplotlib进行数据可视化，以及进行简单的预测建模。这个流程可以用于快速洞察数据特征，自动化报告生成，从而节省时间并减少重复性工作。5pandasmatplotlib请注意，这个示例假设你有一个名为的CSV文件，其中包含至少一个名为Purchased的列，用于表示客户是否购买了产品。
博客
「AIGC」大语言模型系列-Transformer详解
07-08 1515
这个示例代码提供了一个Transformer模型的框架，包括多头自注意力机制、编码器和解码器层、以及最终的输出层。然而，为了保持简洁，解码器的实现和训练逻辑没有包括在内。Transformer模型相对复杂，下面我将提供一个简化版的Transformer模型的Python代码示例，使用PyTorch库实现。这个示例将包括模型的基本结构，如编码器和解码器，自注意力机制，位置编码，以及前馈网络。请注意，这个示例主要用于教学目的，可能不包括一些生产环境中所需的特性，比如层标准化、残差连接、优化器、训练循环等。
博客
「AIGC」TDSQL技术详解
07-08 925
创建一个完整的TDSQL实例涉及到多个步骤，包括数据库的创建、配置、连接以及基本的数据库操作。请注意，以下示例代码是模拟操作，实际使用时需要根据TDSQL的具体环境和要求进行调整。
博客
「树莓派入门」树莓派进阶05-智能门禁系统
07-06 298
创建一个基本的智能门禁系统，该系统可以检测到靠近门禁的人或物体，并根据距离控制门的开关。这只是一个起点，你可以根据自己的需求添加更多的功能和改进。
博客
「树莓派入门」树莓派进阶03-RGB彩灯控制与应用
07-05 378
RGB彩灯为创意项目提供了丰富的视觉元素。通过控制RGB LED，你可以实现各种颜色效果，增加项目的吸引力。在连接和控制RGB LED时，请注意信号引脚的正确连接，避免损坏设备。
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值