图片，背景图片的响应式布局

wzyplus 发布于2019-08-30 12:44 / 3033人阅读

摘要：对于图片布局来说，如果高度自适应的话，一开始父级高度为，需要等图片加载完成之后，才能撑开父级，这样会对整体布局有影响，存在闪动效果，用户体验不佳。动态计算高度对全屏显示的图片，根据图片宽高比动态计算出图片的高度，赋值给父级。

网页布局，如全屏轮播等，或者其他需要根据宽高等比缩放的图片。对于图片布局来说，如果高度自适应的话，一开始父级高度为0，需要等图片加载完成之后，才能撑开父级div，这样会对整体布局有影响，存在闪动效果，用户体验不佳。而且会影响js计算模块高度的等问题。

javaScript动态计算高度

对全屏显示的图片，根据图片宽高比动态计算出图片的高度，赋值给父级div。
这一方法有种，杀鸡焉用牛刀的感觉。

图片占位

根据图片比例选取一个透明的占位图，用来撑开父级div。里面的图片用position：absolute定位。自适应整个盒子。

不足：额外请求一张图片；也需要等图片加载出来，才能撑开父级div。

padding值

利用padding取值百分比来设定高度。垂直高度的padding取百分比值的时候，是相当于其父级的宽度的。


    
        
    


css:
.wrap{
    position: relative;
    margin: 5% 10%;
    border: 1px solid #ccc;
 }
 .wrap:before{
     content: "";
    display: block;
    width: 100%;
    padding-top: 100%;
 }
 .img_box{
     position: absolute;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    background-color: #fff;
 }
 .img_box img{
    max-width: 100%;
    height: auto;
    width:100%;
    vertical-align: top;
  }

云服务器 GPU云服务器响应式布局 asp如何响应式布局 html响应式导布局图片布局数据

文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。

转载请注明本文地址：https://www.ucloud.cn/yun/115022.html

响应式布局的实现

摘要：响应式布局的概念响应式布局，即，在实现不同屏幕分辨率的终端上浏览网页的不同展示方式。框架实现响应式布局利用中栅格系统可以简单实现响应式布局，这里就需要去理解一下啥是栅格系统代表在端上显示在一行的个栅栏，也就是一半。响应式布局的概念响应式布局，即 Responsive design，在实现不同屏幕分辨率的终端上浏览网页的不同展示方式。通过响应式设计能使网站在手机和平板电脑上有更好的浏...

syoya 2019-08-30 10:55 评论0 收藏0
移动优先的响应式布局

摘要：虽然兼容性方案的体验不如常规方案，但保证了功能可用性移动优先的响应式布局采用的是渐进增强原则，制作响应式网站时，先搞定手机版，然后再去为更大设备去设计和开发更复杂的功能。前面的话　　随着移动互联网的兴起，不同设备的分辨率相差较大，如果在不同的设置上显示同一个页面，则用户体验差。响应式网页设计是一种方法，使得一个网站能够兼容多个终端，而不用为每个终端制作特定的版本。它使得一个网站可以在任何类...

番茄西红柿 2019-04-23 13:43 评论0 收藏0
不规则图片列表实现响应式布局

摘要：优点在于响应式布局非常方便，都是按照比例进行的缩放，弊端是在于如果图片不规则，那么图片变形是难免的。一次布局多终端友好技术开发和实际运营总是有很大差别的，比如常见的图片列表，一般设计图上都是固定尺寸大小的，但是实际操作起来并没有太多人去ps修剪图片到知道的尺寸，大部分都是差不多比例的图片就直接上传了，为了解决不规则图片列表展示问题有相应的解决方案例如瀑布流，或者相册等，但是对于多终端...

ASCH 2019-08-01 17:26 评论0 收藏0
不规则图片列表实现响应式布局

摘要：优点在于响应式布局非常方便，都是按照比例进行的缩放，弊端是在于如果图片不规则，那么图片变形是难免的。一次布局多终端友好技术开发和实际运营总是有很大差别的，比如常见的图片列表，一般设计图上都是固定尺寸大小的，但是实际操作起来并没有太多人去ps修剪图片到知道的尺寸，大部分都是差不多比例的图片就直接上传了，为了解决不规则图片列表展示问题有相应的解决方案例如瀑布流，或者相册等，但是对于多终端...

linkFly 2019-08-29 13:11 评论0 收藏0
CSS及布局

摘要：经过半年的打磨，正式发布，主要是新增了一些常用组件，并使用命名，为接下来的微信小程序开发做好准备。这两种方式实现的瀑布流式布局均支持首屏和网页窗口大小改变时的列数自适应。主要是对于标准里的布局方式草案中的布局方式进行一些总结。一劳永逸的搞定 flex 布局寻根溯源话布局一切都始于这样一个问题：怎样通过 CSS 简单而优雅的实现水平、垂直同时居中。记得刚开始学习 CSS 的时候，看...

jaysun 2019-08-29 14:04 评论0 收藏0