CSS之容器按比例缩放

1.对于图片,默认只设置图片的一个宽或高,那么另一个值就会按照图片真实比例缩放

这里写图片描述

图片因为本身存在宽高比,所以设置一个值,另一个值自动也就根据真实的比例对应上

2.但跟pc的不一样,移动端的图片很多都不是固定的宽高的(icon图标与头像等一些小图还是固定大小的),所以就面临一个问题:不能设置一个具体的高度,于是就会出现加载过程其他内容随着图片的加载慢慢向下移动

我们怎么确定容器的高度,从而消除慢慢向下加载的影响呢?

首先必须设置height为0,按照浏览器从上而下、从外到内的渲染机制,首先父容器的高度为0,而父容器的宽度就是图片的宽度,再根据百分比padding-top等比例设置父容器的高度,最后再渲染子元素图片让其百分百充满父容器。这样就会保证在图片宽度任意变化的情况下,高度仍然是等比例的,所以不仅保证了外层容器的宽高比还撑开了容器,最后使用图片绝对定位设置宽高100%即可实现按照比例缩放

放在移动端,假设先设置外层容器宽度为50%,随着用户缩放屏幕容器宽度改变,则外层容器的高度按照比例缩小,这样就能保证容器的自适应显示

实例:

这里写图片描述

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.mzph.cn/news/407417.shtml

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

[转载]vs2008下安装boost

vs2008下安装boost 1.下载boost_1_34_1压缩文件,解压缩到d:\boost_1_34_1\目录下 2.编译bjam 从vs2008的工具菜单进入命令提示窗口"Visual Studio 2008 Command Prompt"(一定要从这进),cd到c:\boost_1_34_1\…

文件上传命令rz和下载命令sz的安装

一、xshell工具简介 Xshell 是一个强大的安全终端模拟软件,它支持SSH1, SSH2, 以及Microsoft Windows 平台的TELNET 协议。其可以在Windows界面下用来访问远端不同系统下的服务器,从而比较好的达到远程控制终端的目的。 二、xshell连接虚拟机 1.打开xs…

python IDE比较与推荐

我先给一个初步的表格吧,大家如果有什么意见,或有补充,欢迎提出。有些我没有用过,先不写了。以下是我使用过的python IDE:(更新与2010年1月20日)┌─────┬────┬────┬──┬────┬──┬─────┬─────…

算法系列7《CVN》

计算CVN时使用二个64位的验证密钥,KeyA和KeyB。 1) 计算CVN 的数据源包括: 主账号(PAN)、卡失效期和服务代码,从左至右顺序编排。 41234567890123458701111 2) 将上述数据源扩展成128 位二进制数据(不足128…

CSS之Box-sizing

W3C的标准盒模型: IE的传统盒模型: 实例: 1.W3C 盒子模型的范围包括 margin、border、padding、content,并且 content 部分不包含其他部分 2.IE 盒子模型的范围也包括 margin、border、padding、content,和标准 W3C 盒…

javascript学习系列(9):原数组发生变化的情况

最好的种树是十年前,其次是现在。歌谣 每天一个前端小知识 提醒你改好好学习了 知乎博主 csdn博主 b站博主 放弃很容易但是坚持一定很酷 我是歌谣 喜欢就一键三连咯 你得点赞是对歌谣最大的鼓励 1前言 在我们的日常开发中 不免会有很多需要处理数据的方法 本节主要说一说形…

阿里云设置域名解析到主机ip

A记录 使用场景 添加 A 记录可实现将域名指向 IP 地址。 设置方法 登录云解析DNS控制台在域名解析页面,全部域名页签下,单击域名,进入解析设置页面 在解析设置页面,单击 添加记录 按钮 添加记录会话框中各项参数的添加说明。 …

python fabric实现远程操作和部署

博客迁往:新地址 (点击直达) 新博客使用markdown维护,线下有版本号库,自己写的所以会定时更新同步,同一时候提供更好的导航和阅读体验 csdn对markdown支持不好,所以旧版不会花时间进行同步修订&…

[Windows]python+PyQT+Eric安装配置

From: http://www.cnblogs.com/lhj588/archive/2011/10/05/2198472.html 一、大纲内容: 1、预备PC环境: 2、预备安装程序: 2、1、下载Python3.2 2、2、下载PyQt4 2、3、下载Eric5 3、安装配置步骤: 3、1、安装Pyhon3.2 3、2、安装Py…

CSS之BFC

1.BFC(Block Formatting Context)是Web页面中盒模型布局的CSS渲染模式。它的定位体系属于常规文档流 2.创建一个BFC 一个新的BFC可以通过给容器添加任何一个触发BFC的CSS样式,如overflow: scroll, overflow: hidden, display: flex, float: left,或者 display: tabl…

[导入]WINRAR 命令行语法[转载]

WINRAR 命令行语法 [ 2006-10-13 23:33:44 | 作者: 碳酸氢钠 ] Font Size: Large | Medium | Small 语法:RAR <命令> [-<开关>] <压缩包> <文件列表...> [<文件...>] [<解压缩路径\>]命令行选项(命令及开关)提供 RAR 创建及管理控制压缩包…

【计算机网络】端口和进程的区别

端口和进程的区别 用一个例子说明二者的区别 现在有一个手机&#xff0c;这个手机好比一个和外界通信的端口。 你现在想给你女朋友打电话&#xff0c;可是手机被占用了&#xff0c;你就开始大喊&#xff0c;谁拿了我的手机&#xff08;翻译一下就是&#xff1a;哪个进程占用…

[python]如何清屏?也就是实现clear?

import os os.system( cls ) 由此也可见,想要执行任何一条系统命令,都只需要执行os.system( COMMAND )就行了. 因此&#xff0c;在windows命令提示符下清屏就是&#xff1a;os.system("cls") 在linux终端下清屏就用&#xff1a;os.system("clear")

javascript学习系列(10):数组中的slice方法

最好的种树是十年前,其次是现在。歌谣 每天一个前端小知识 提醒你改好好学习了 知乎博主 csdn博主 b站博主 放弃很容易但是坚持一定很酷 我是歌谣 喜欢就一键三连咯 你得点赞是对歌谣最大的鼓励 1前言 在我们的日常开发中 不免会有很多需要处理数据的方法 本节主要说一说s…

【官方文档】《暗黑世界V1.4》API说明!

指令号说明账号注册 100{username str 用户名password str 密码}返回信息{result bool 指令调用是否成功message str 指令调用返回的信息}账号登陆 101请求信息{username str 用户名password str 密码}返回信息{result bool …

SpringSide示例之HelloWorld

SpringSide是个什么东西呢&#xff1f;这么说吧&#xff0c;就是“采众家之长”的一个一站式框架&#xff0c;它吸取了开源界许多优秀组件的精华部分&#xff0c;非常简约的一个东西&#xff0c;具体就不多介绍了&#xff0c;自己可以参考官方文档。下面来看看运用这个框架实现…

CSS之viewports剖析

1.设备的pixels和CSS的pixels 首先你应当理解CSS的pixels&#xff0c;以及它和设备的pixels的区别 我们姑且认定设备的pixels为标准的pixels宽度。这些pixels决定了你工作所用的那些设备上正式的分辨率。在大多数情况下&#xff0c;能够从screen.width/height上取出具体值 如…

9个好用的搜索小技巧

百度一下&#xff0c;你就知道。搜索是我们常用的工具&#xff0c;怎么又快又准的搜索出想要的结果是现代人必备的技能&#xff0c;下面就教你9个好用的搜索小技巧吧 1 . 完全匹配搜索。 在查询词的外边加上双引号“”。 如 “北京地坛” &#xff0c;注意引号是不分中英文的…

raw_input() 与 input() __ Python

>>> input ("my age is : ") my age is :23 23 >>> raw_input("my age is : ") my age is : 23 23 有什么不一样&#xff1f;再看一个例子 >>> age input(" how old r u ?") how old r u ?23 >>> p…