要保持图片的比例不变

这一张图片在不同分辨率（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. Spring Boot的快速创建

    一.利用向导快速搭建Spring Boot应用 创建一个controller package com.hoje.springboot.Controller; import org.springfram ...

  2. 实习小结（四）--- MyBatis Generator使用

    第一次听闻MyBatis Generator插件很是惊讶,已经有这么便捷方式的工具通过数据库表来自动生成实体类,映射文件,接口以及帮助类,而且可以通过自己写方法来增加中文注释,遂来学习一波.首先先建一 ...

  3. CodeForces762A

    A. k-th divisor time limit per test:2 seconds memory limit per test:256 megabytes input:standard inp ...

  4. github上手实践教程

    简介: SSH公私钥的使用 github的使用 git 工具的基本使用 基本步骤: 一.github的使用 1.github账号的创建[官网一步一步创建就行了,这一步骤省略] 2.创建远程仓库: 创建 ...

  5. opencv3.2.0图像处理之方框滤波boxFilter API函数

    /*.1.方框滤波:boxFilter函数(注:均值滤波是归一化后的方框滤波)*/ /*函数原型: void boxFilter(InputArray src, OutputArray dst, in ...

  6. 1finally与return、exit()

    public class TestException { public static void main(String[] args) { String[] str = {"1", ...

  7. ExpressRoute 线路和路由域

    你必须订购一条 ExpressRoute 线路 ,以通过连接提供商将你的本地基础结构连接到 Azure.下图提供了你的 WAN 与 Azure 之间的连接的逻辑表示形式. ExpressRoute 线 ...

  8. springMVC入门-05

    接着上一讲,介绍如何查询单个数据,此处介绍show()方法的实现.显示单条数据需要使用Users对象中的一个字段作为入参来进行对象查询,将查询出来的数据放在Model中,并且将model中的user对 ...

  9. 查看windows所有exe的启动参数。

    在cmd中输入 wmicprocess 即可查看到所有进程的启动参数和运行参数.

  10. MyEclipse中修改servlet模板

    1.在MyEclipse目录下搜索com.genuitec.eclipse.wizards,得到搜索结果 com.genuitec.eclipse.wizards_8.4.100.me20091213 ...