要保持图片的比例不变

这一张图片在不同分辨率（1980px, 1364px,移动端400px）下均保持了一定的比例不变。

方法：

padding以及margin的上下（margin-top | margin-bottom | padding-top | padding-bottom）使用百分比时。参考的是容器的宽度。注意不是容器的高度。

容器使用width:100% ，这样容器的高度由padding-top撑开，高度为宽度的35%。这样图片的比例始终是 100:35 不会变形。

图片保持比例，padding的妙用的更多相关文章

  1. 理解CSS3中的background－size(对响应性图片等比例缩放)

    理解CSS3中的background-size(对响应性图片等比例缩放) 阅读目录 background-size的基本属性 给图片设置固定的宽度和高度的 固定宽度400px和高度200px-使用ba ...

  2. 让ie6也支持max-width，和max-height实现图片等比例缩放

    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/ ...

  3. (转载)让ie6也支持max-width，和max-height实现图片等比例缩放

    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/ ...

  4. 【转载】如何让图片按比例响应式缩放、并自动裁剪的css技巧

    原文: http://blog.csdn.net/oulihong123/article/details/54601030 响应式网站.移动端页面在DIV CSS布局中对于图片列表或图片排版时, 如果 ...

  5. C#图片按比例缩放

    C#图片按比例缩放: // 按比例缩放图片 public Image ZoomPicture(Image SourceImage, int TargetWidth, int TargetHeight) ...

  6. js控制 固定框架内图片 按比例显示 以及 占满框架 居中显示

    js控制 固定框架内图片 等比例显示 以及 占满框架 纵横居中显示 通过设置 js函数 fitDiv里面var fit的值就好 function fitDiv (obj) { var target_w ...

  7. 【转】微信小程序开发之图片等比例缩放 获取屏幕尺寸图片尺寸 自适应

    原文[https://blog.csdn.net/qq_31383345/article/details/53127804] 早上在论坛上看到有人写了关于图片等比例缩放的文章,只是判断了图片宽是否大于 ...

  8. css3 实现图片等比例放大与缩小

    css3 实现图片等比例放大与缩小 在工作中,经常会碰到图片缩放的情况,比如服务器端返回的图片大小,可能大小不同,有的大,有的小,服务器端返回的图片大小我们不能控制的,但是在我们设计稿的时候,可能会规 ...

  9. css 如何实现图片等比例缩放

    在进行布局的时候,很多PM都要求图片等比例缩放,而且要求图片不失真,不变形,但是UI设计好了这个div的宽度又不能随意更改,而后台传过来的图片也不是等比例的图片,这就比较难受了,写成 width: 1 ...

随机推荐

  1. CRC算法

    https://blog.csdn.net/dream_1996/article/details/73588269

  2. Nib加载的方式实现自定义TableView

    实现的效果 实现原理: 通过在主界面中用Bundle 的LoadNib的方式进行自定义窗体文件加载并渲染界面 实现步骤 Step One 创建TableViewCell 窗体 Step Two 定义接 ...

  3. SQL Server 修改表结构被阻止 解决办法

    在我们的程序开发中,有时候会由于需求的变化而要修改数据库中的表结构.可能是增减列,也可能是修改数据类型,或者修改列名等等.但修改表结构是个危险操作,默认情况下,当你修改表结构时,会弹出如下提示框 上图 ...

  4. OpenGL学习--01--打开一个窗口

    // Include standard headers #include <stdio.h> #include <stdlib.h> // Include GLEW #incl ...

  5. Ubuntu中网络配置interfaces与界面网络配置NetworkManager

    [Server版本] 在Ubuntu Server版本中,因为只存有命令行模式,所以要想进行网络参数设置,只能通过修改 /etc/network/interfaces .具体设置方法如下: (1) U ...

  6. ADB指令大全

    Android Debug Bridge version 1.0.26.26 -a - directs adb to listen on all interfaces for a connection ...

  7. LOCAL_LISTENER 引起的错误

    1. 如果你的LOCAL_LISTENER 指定的是一个别名 比如L2 *.local_listener='L2' 启动实例的时候 会先到 tnsnames.ora 文件里取查找定义名为L2的TNS服 ...

  8. Week6——Lifecycle of JSF and Facelets

    一.JSF生命周期 JSF是基于事件驱动.JSF生命周期分为两个主要阶段:执行阶段和渲染阶段. 1.执行阶段 分为六个阶段: 恢复视图阶段 当客户端请求一个JavaServer Faces页面时,Ja ...

  9. Oracle EBS 查询用户职责

    select b.user_name UserID, b.description User_Name, f.RESPONSIBILITY_NAME RESPONSIBILITY from FND_US ...

  10. [WSUS] Windows Server Update Service 更新后，出现错误不能连接

    执行以下命令:C:\Program Files\Update Services\Tools\wsusutil postinstall /servicing 参考:http://www.urtech.c ...