普定县 射阳县 静海县 宜宾市 白银市 内黄县 西林县 道孚县 三台县 玉山县 新民市 藁城市 儋州市 安远县 沙河市 玉溪市

文章导航软件下载单机游戏安卓资源苹果资源

pc软件新闻网络操作系统办公工具编程服务器软件评测

安卓新闻资讯应用教程刷机教程安卓游戏攻略tv资讯深度阅读综合安卓评测

苹果ios资讯苹果手机越狱备份教程美化教程ios软件教程mac教程

单机游戏角色扮演即时战略动作射击棋牌游戏体育竞技模拟经营其它游戏游戏工具

网游cf活动dnf活动lol周免英雄lol礼包

手游最新动态手游评测手游活动新游预告手游问答

您的位置:单机游戏角色扮演 → 怪物猎人世界新装备介绍 怪物猎人世界新装备新系统一览

金立_记一次产品需求:图片等比缩放和CSS自适应布局16:9

标签:短小 云顶注册就送28

前言

  前阵子,产品跑过来问我现有的模板中没有图片模板,需要添加一个图片模板;然而,他要求图片在展示区最好能够实现随着窗口的变化而自动按图片比例等比缩放,并且居中展示图片。我当时想着,抛开技术实现层面,图片展示也理应是这样的,更加友好。当时我就说应该没啥大问题,于是就有了下文(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:婉君_2018年最新新闻网 #c3e6c2;">
  <img style="
       max-width:100%;
       max-height:100%;
       position: absolute;
       left: 0;
       right: 0;
       top: 0;
       bott今夜有戏_2018年最新新闻网om: 0;
       margin: auto;" 
    src
="http://oc24816dq.bkt.clouddn.com.chuadrug.cn/20090622131631-85311624%5B1%5D.bmp">
</div>

  效果图:

(1)当父元素宽高够大时,图片展示原尺寸并居中展示

(2)当窗口变窄,图片也随之等比缩小

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

2.等比例自极品驸马_2018年最新新闻网适应布局

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

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

<!DOCTYPE html>
    <body style="background: beige;display: flex;align-items: center;">
       <div style="标致_2018年最新新闻网position: relative;width:100%;padding-top:56.2%;background: #c3e6c2;">
           <img s百达翡丽_2018年最新新闻网tyle=" max-width:100%;
                        max-height:100%;
                        position: absolute;
                        left: 0;
                        right: 0;
                        top: 0;
                        bottom: 0;
                        margin: auto;" 
                        src="http://oc24816dq.bkt.clouddn.com.chuadrug.cn/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。

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

当前文章:http://rgxg0nq-mingchenbing-com.chuadrug.cn/pe1s1/894fa_155599.html

发布时间:2019-10-19 01:22:42

澳门银河送彩金  银河娱乐手机版yh163am.com  澳门银河首页yh163am.com  澳门银河有正规平台吗  澳门银河yh99.com  银河娱乐是正规网站吗  银河娱乐官网yh163am.com  www.7163.com澳门银河  澳门银河有正规平台吗  澳门银河首页yh163am.com  

相关阅读 【Canal源码分析】client工作过程种越夏蔬菜 这些品种好微软为Surface Pro推送Windows 10驱动更新:改善系统稳定性网媒记者西藏山南行:记录雪域变迁,描绘边疆新颜邓德隆:定位产业格局重构下的新思维扎克伯格将现身欧洲议会就数据外泄丑闻接受“拷问”微软照片UWP时间线正式降临Windows 10更新四月版129元!小米生态链紫米Aura快充移动电源限时降价:20000mAh

文章评论
发表评论

热门文章 安徽临泉:往外卖菜再也不怕路窄了spark集群搭建整理之解决亿级人群标签问题苹果公布HomePod第二批上市国家,中国市场依旧无缘朝鲜:对美方取消特金会表遗憾 愿随时与美会晤

最新文章 “五一”小长假旅游大数据报告发布 三亚位居国内前十大休闲度假目的地首位外媒放出苹果iPhone 8s多彩外观渲染图:蓝、黄、粉 清华大学副校长薛其坤:未来量子技术将发挥重大作用大数据加速渗透实体经济互联网家装面临洗牌:泥巴公社各地门店大规模关门初夏的经典搭配 竹笋炒肉你值得一试

人气排行 电线正成加州火灾头号祸首,技术能解决这个难题吗?《精灵宝可梦》新作要来了? 东京电视台称将在5.31公布震惊世界的新消息京东X事业部总裁肖军:今年8月将推智慧餐厅皮薄肉厚/香甜顺滑,丰如园广西小贵妃芒果8斤28.8元央视网评安徽六安教师上访:让被欠薪的教师有个讲理的地方稳了!三星正式确认Galaxy S10采用屏下指纹第八届中国月季展将于9月在四川绵竹举行Cocoa包管理器之CocoaPods详解