要保持图片的比例不变

这一张图片在不同分辨率（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. Microservices与DDD的关系

    Microservices(微服务架构)和DDD(领域驱动设计)是时下最炙手可热的两个技术词汇.在最近两年的咨询工作中总是会被不同的团队和角色询问,由此也促使我思考为什么这两个技术词汇被这么深入人心的 ...

  2. Vue如何使用动态刷新Echarts组件

    这次给大家带来Vue如何使用动态刷新Echarts组件,Vue使用动态刷新Echarts组件的注意事项有哪些,下面就是实战案例,一起来看一下. 需求背景:dashboard作为目前企业中后台产品的“门 ...

  3. 爬虫必备—scrapy-redis（分布式爬虫）

    转载自:http://www.cnblogs.com/wupeiqi/articles/6912807.html scrapy-redis是一个基于redis的scrapy组件,通过它可以快速实现简单 ...

  4. JS 面试题 实践一

    1.完成 extname 函数,它会接受一个文件名作为参数,你需要返回它的扩展名. 例如,输入 emoji.png,返回 .png. const extname = (filename) => ...

  5. JavaWeb学习—思维导图

  6. OpenGL学习—04--彩色立方体

        1.tutorial04.cpp // Include standard headers #include <stdio.h> #include <stdlib.h> ...

  7. Windows win7下VMware Virtual Ethernet Adapter未识别网络解决方法

    win7下VMware Virtual Ethernet Adapter未识别网络解决方法[摘] by:授客 QQ:1033553122 问题描述 win7系统下安装VMware,查看网卡适配器设置, ...

  8. Linux 系统下 centOS 7 ipconfig 提示没有安装

    首先更正一下,在Linux系统下,查看IP地址,指令是ifconfig 没有root权限情况下,安装指令为 sudo yum -y install net-tool 有root权限的话,直接执行 yu ...

  9. 转 Js窗体window大小设置

    网页可见区域宽:document.body.clientWidth  网页可见区域高:document.body.clientHeight  网页可见区域宽:document.body.offsetW ...

  10. maven Could not find artifact com.** 无法下载原因分析

    1.有时候经常莫名其妙的遇到这个问题:比如在idea重新导入一个新项目,或者在原来的空间里面引入一个新项目.去私服里面查看明明是有的,但是就是下载不下来. 结合网上搜的和自己遇到的,总结原因如下: 1 ...