不规则图片列表实现响应式布局

linkFly 发布于2019-08-29 13:11 / 2357人阅读

摘要：优点在于响应式布局非常方便，都是按照比例进行的缩放，弊端是在于如果图片不规则，那么图片变形是难免的。一次布局多终端友好

技术开发和实际运营总是有很大差别的，比如常见的图片列表，一般设计图上都是固定尺寸大小的，但是实际操作起来并没有太多人去ps修剪图片到知道的尺寸，大部分都是差不多比例的图片就直接上传了，为了解决不规则图片列表展示问题有相应的解决方案例如瀑布流，或者相册等，但是对于多终端响应式的网站这是非常头疼的。

一、常见的图片固定大小方式弊端

固定图片宽高，图片变形

响应式布局跨度不能太大，需要跨度小修改宽度频繁

不利于左右间距控制等

二、两种解决方案

方案一：使用rem来书写响应式的宽高，宽高根据font-size的大小来实现动态改版宽度。

优点在于响应式布局非常方便，都是按照比例进行的缩放，弊端是在于如果图片不规则，那么图片变形是难免的。为了解决图片变形问题我们介绍一下方案二.

方案二：使用定位比例法

图片外层的盒子（div或者dt）定义如下样式：

height:0;   //高度设置为0
width:23%;    //使用百分比宽度和百分比边距
margin:0 1%;
position: relative;  //定位
padding-bottom:75%;  //使用padding来按照比例撑开div
overflow: hidden;    //溢出部分隐藏

这时候盒子内部的图片设置宽度百分百，高度自适应，定位在（0,0）点，图片会被外层盒子自动截取，因为外层的盒子padding和宽度都是百分比的，所以整个布局是百分比显示的。

position: absolute;    //定位在0,0位置，解决padding占高图片不在最顶端问题
left: 0;
top: 0;
width: 100%            //自适应高度，宽度百分比
height: auto;

优点如下：

按照宽度的比高度的百分比来设置padding，可视区域按照比例缩放

解决图片变形的困扰。

一次布局多终端友好

GPU云服务器云服务器响应式布局 asp如何响应式布局 html响应式导布局响应式

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

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

不规则图片列表实现响应式布局

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

ASCH 2019-08-01 17:26 评论0 收藏0
css進階

摘要：栅格系统用于处理页面多终端适配的问题。它表示抓取对象以后拖放到另一个位置。目前，它是标准的一部分。精简高效的命名准则方法这篇文章发布于年月日，星期日，，归类于相关。但是不会受到包含块的限制，可能会溢出。一劳永逸的搞定 flex 布局寻根溯源话布局一切都始于这样一个问题：怎样通过 CSS 简单而优雅的实现水平、垂直同时居中。记得刚开始学习 CSS 的时候，看到 float 属性不由...

import. 2019-08-29 14:07 评论0 收藏0
关于响应式布局，你必须要知道的

摘要：本文主要介绍一些响应式布局容易忽略但又很重要的知识点。单位不仅仅可以用来设置字号，还可以设置任何盒模型的属性，比如有一点优势就是可以和媒体查询配合，实现响应式布局运用场景如果我们做的页面只在移动端访问，这是因为不兼容低版本的浏览器。一、前言响应式Web设计可以让一个网站同时适配多种设备和多个屏幕，可以让网站的布局和功能随用户的使用环境（屏幕大小、输入方式、设备/浏览器能力）而变化。...

Eirunye 2019-08-02 11:56 评论0 收藏1
关于响应式布局，你必须要知道的

摘要：本文主要介绍一些响应式布局容易忽略但又很重要的知识点。单位不仅仅可以用来设置字号，还可以设置任何盒模型的属性，比如有一点优势就是可以和媒体查询配合，实现响应式布局运用场景如果我们做的页面只在移动端访问，这是因为不兼容低版本的浏览器。一、前言响应式Web设计可以让一个网站同时适配多种设备和多个屏幕，可以让网站的布局和功能随用户的使用环境（屏幕大小、输入方式、设备/浏览器能力）而变化。...

nevermind 2019-08-29 17:11 评论0 收藏0
关于响应式布局，你必须要知道的

摘要：本文主要介绍一些响应式布局容易忽略但又很重要的知识点。单位不仅仅可以用来设置字号，还可以设置任何盒模型的属性，比如有一点优势就是可以和媒体查询配合，实现响应式布局运用场景如果我们做的页面只在移动端访问，这是因为不兼容低版本的浏览器。一、前言响应式Web设计可以让一个网站同时适配多种设备和多个屏幕，可以让网站的布局和功能随用户的使用环境（屏幕大小、输入方式、设备/浏览器能力）而变化。...

amuqiao 2019-08-23 12:45 评论0 收藏0