前言

　　前阵子，产品跑过来问我现有的模板中没有图片模板，需要添加一个图片模板；然而，他要求图片在展示区最好能够实现随着窗口的变化而自动按图片比例等比缩放，并且居中展示图片。我当时想着，抛开技术实现层面，图片展示也理应是这样的，更加友好。当时我就说应该没啥大问题，于是就有了下文（PS:萌新还没技术积累，只能是凭着一点积累和现查来调研）。

1. 图片等比缩放

　　网上搜了一下图片等比缩放，有介绍使用:

 width: auto;
 height: auto; 
 max-width: 100%; 
 max-height: 100%;

　　使用这个其实没啥大问题，两点细节我补充一下：

　　1.其实，当定义了max-height和max-width的时候，就无需在重复定义width：auto；稍微细想下便知，而且亲测不加width和height为auto也是效果一样。

　　2.有网友提到只加max-width为100%就行，高度让它等比缩放。其实也有不妥，如下图：

　　当图片存在父级（图中2标识），如果再让高度等比例自适应的话，图片就会超出父元素，这显然不是我们想要的。所以，建议同时使用max-width和max-height为100%，宽高不用设置即可。

　 代码如下：　

<div style="position: relative;width:100%;heigth:500px;background: #c3e6c2;">

  <img style="

       max-width:100%;

       max-height:100%;

       position: absolute;

       left: 0;

       right: 0;

       top: 0;

       bottom: 0;

       margin: auto;" 
　　　　src="http://oc24816dq.bkt.clouddn.com/20090622131631-85311624%5B1%5D.bmp">
</div>

　　效果图：

       （1）当父元素宽高够大时，图片展示原尺寸并居中展示

（2）当窗口变窄，图片也随之等比缩小

　　其实，max-width和max-height还有很多其他应用场景，我也没多做总结，有时间的话再对这两个属性在其他使用场景进行介绍。

2.等比例自适应布局

　　直接开门见山，类似的实现相信大家都知道，核心就是利用padding是百分比的情况下是相对于父元素的宽度（PS: 此处相对于父元素的content宽度，即便父元素存在padding，百分比也是相对于content区域，可以自行去做实验验证）。　

　　如果想实现16:9的自适应性比例布局，核心代码如下：

<!DOCTYPE html>

    <body style="background: beige;display: flex;align-items: center;">

       <div style="position: relative;width:100%;padding-top:56.2%;background: #c3e6c2;">

           <img style=" max-width:100%;

                        max-height:100%;

                        position: absolute;

                        left: 0;

                        right: 0;

                        top: 0;

                        bottom: 0;

                        margin: auto;"

                        src="http://oc24816dq.bkt.clouddn.com/20090622131631-85311624%5B1%5D.bmp" alt="">

        </div>

    </body>

</html>

　　效果图：

　　浅绿色区域就是16：9的效果，该部分会随着窗口的变化而按16：9的比例去变化。（56.2% = 9/16*100%）

　　发散：当width和padding设置成相同的百分比时，就能实现自适应性正方形布局了。

拓展思考

　　无意中发现这段css比较实用，而且稍作改动就能实现另一种布局，代码如下：

.middle{

  position:absolute;

  top:0;

  bottom:0;

  left:0;

  right:0;
  margin: auto;

}

　　这段常见的代码用于水平垂直居中，其中的top和bottom同时为0，表示的是该子元素占满父元素的高度；同理left和right为0时表示该子元素占满父元素宽度。

　　利用这段代码能实现好多常见布局，而且兼容性也很好，可以在项目中多多实践和总结。

　　1.实现sticky-footer。原理：将元素的bottom设置为80px，而底部固定一个div，设置成position:fixed;height:80px;大致思路如此。 

　　效果图：

（1）当内容区没有足够多文字时

（2）当内容区文字很多，此时出现滚动条（mac滚动条会自动隐藏），但footer仍然在底部

　　2.该段代码还可以实现只水平居中或只垂直居中；还可以实现宽度、高度自适应布局等等。大家可以自己好好想想。

总结：

　　这是最近应用到项目中的css代码段，觉得不错就总结分享一下。如有不正确或更好的建议，欢迎留言讨论。

　　附上一篇关于响应式布局的文字，个人觉得不错，分享一下：https://yusi123.com/2539.html。 

　　欢迎推荐和关注，你的鼓励是我前进的动力！！！

记一次产品需求：图片等比缩放和CSS自适应布局16:9的更多相关文章

  1. [转]产品需求文档(PRD)的写作

    产品需求对产品研发而言非常重要,写不好需求,后面的一切工作流程与活动都会受到影响.转载一篇文章,关于产品需求文档写作方面的,如下: 本文摘自(一个挺棒的医学方面专家):http://www.cnblo ...

  2. 产品需求文档 PRD

    第一轮: 1,文档使用方:UI设计师 2.内容:       根据战略层定义出来产品功能范围,       说明此产品的目的,方便UI设计人员更好的理解产品       产品基本流程       详细 ...

  3. 产品需求文档(PRD)的写作 【转】

    产品需求文档(PRD)的写作   一.文章的摘要介绍 无论我们做什么事都讲究方式方法,写产品需求文档(以下称PRD文档)也是如此,之前我通过四篇文章分享了自己写PRD文档的一些方法,而这一篇文章主要是 ...

  4. <停车卫> 产品需求说明书 version 2.0

    <停车卫> 产品需求说明书 文档版本号: Version 2.0 文档编号: xxxx 文档密级: 归属部门/项目: 产品名: 停车卫 子系统名: 编写人: kina 编写日期: 2015 ...

  5. 产品需求文档(PRD)的写作方法之笔记一

    1.写前准备(思维导图): http://www.woshipm.com/?p=80070 1.在写之前,请先很区分清楚什么是MRD文档(市场需求文档),BRD文档(商业需求文档),什么是PRD文档( ...

  6. PRD产品需求文档

    什么是PRD? PRD是Product Requirement Document的英文缩写,即产品需求文档的意思.PRD昰产品流程中的最后一步工作,是将原型中的功能.界面具象化描述,是提交给设计(UI ...

  7. 五分钟轻松搞定产品需求文档！这可能史上最全PRD文档模板

    本文由  @JustWu 原创发布于社区 为什么写这篇文章? 第一:写PMCAFF的PRD文档,大家都是用户,比较好参考与理解,方便大家来找我写的不好的地方. 第二:我在自学PRD文档的编写过程中,总 ...

  8. PRD产品需求文档概要

    PRD概念 PRM就是Product Requirements Document的简称,也就是产品需求模型.一般来说一个产品会伴随有市场需求文档(Market Requirements Documen ...

  9. 设置批量商品优惠、如何修改ZenCart产品显示图片的大小

    利用下面的方法,可以实现: 买一送一.买一件第二件5折.买三件优惠10%等功能. 管理页面 - 商品管理 - 价格管理 - (选择商品) - 编辑 - 添加空白折扣. 应用上面的办法,能够完成:买一送 ...

随机推荐

  1. Kali Linux Live USB初始化+使用日记

    1.Live USB制作官方guide:Making a Kali Bootable USB Drive:https://docs.kali.org/downloading/kali-linux-li ...

  2. Django中的原子事务相关注意事项

    Django中的原子事务支持(transaction.atomic)方式函数装饰器或者with语句,这种方式特别是前者和spring里面的AOP事务支持方式基本等同,当然其实质方式都是原始的try.. ...

  3. String 类的函数实现

    #include<iostream> //#include<string> using namespace std; class Strings { public: Strin ...

  4. java 字符串池【转】

    java 字符串池 java运行环境有一个字符串池.比如String str="abc"时,会首先查看字符串池中是否存在字符串"abc",如果存在则直接将&qu ...

  5. python爬虫入门（四）利用多线程爬虫

    多线程爬虫 先回顾前面学过的一些知识 1.一个cpu一次只能执行一个任务,多个cpu同时可以执行多个任务2.一个cpu一次只能执行一个进程,其它进程处于非运行状态3.进程里包含的执行单元叫线程,一个进 ...

  6. javascript中!=、!==、==、===操作符总结

    JavaScript 有两种比较方式:严格比较运算符和转换类型比较运算符. 在相等运算符中对应 === .!==和 ==.!=. 先举个栗子 var str = '1' var num0 = 0 va ...

  7. FPA笔记三 数据功能的识别

    原创作品,允许转载,转载时请务必以超链接形式标明文章 原始出处 .作者信息和本声明.否则将追究法律责任.http://welkinhu.blog.51cto.com/447606/115477     ...

  8. Zookeeper学习

    http://www.cnblogs.com/caosiyang/archive/2012/11/09/2763190.html   http://www.cnblogs.com/haippy/tag ...

  9. dup和dup2应用实例（dup跟APUE有出入，close+dup=dup2？）

    dup/dup2函数 有时我们希望把标准输入重定向到一个文件,或者把标准输出重定向到一个网络连接. dup()与dup2()能对输入文件描述符进行重定向. 函数原型如下: dup函数创建一个新的文件描 ...

  10. springboot之启动原理解析

    前言 SpringBoot为我们做的自动配置,确实方便快捷,但是对于新手来说,如果不大懂SpringBoot内部启动原理,以后难免会吃亏.所以这次博主就跟你们一起一步步揭开SpringBoot的神秘面 ...