不規(guī)則圖片列表實現(xiàn)響應(yīng)式布局

ASCH 發(fā)布于2019-08-01 17:26 / 2833人閱讀

摘要：優(yōu)點在于響應(yīng)式布局非常方便，都是按照比例進(jìn)行的縮放，弊端是在于如果圖片不規(guī)則，那么圖片變形是難免的。一次布局多終端友好

技術(shù)開發(fā)和實際運(yùn)營總是有很大差別的，比如常見的圖片列表，一般設(shè)計圖上都是固定尺寸大小的，但是實際操作起來并沒有太多人去ps修剪圖片到知道的尺寸，大部分都是差不多比例的圖片就直接上傳了，為了解決不規(guī)則圖片列表展示問題有相應(yīng)的解決方案例如瀑布流，或者相冊等，但是對于多終端響應(yīng)式的網(wǎng)站這是非常頭疼的。

一、常見的圖片固定大小方式弊端

固定圖片寬高，圖片變形

響應(yīng)式布局跨度不能太大，需要跨度小修改寬度頻繁

不利于左右間距控制等

二、兩種解決方案

方案一：使用rem來書寫響應(yīng)式的寬高，寬高根據(jù)font-size的大小來實現(xiàn)動態(tài)改版寬度。

優(yōu)點在于響應(yīng)式布局非常方便，都是按照比例進(jìn)行的縮放，弊端是在于如果圖片不規(guī)則，那么圖片變形是難免的。為了解決圖片變形問題我們介紹一下方案二.

方案二：使用定位比例法

圖片外層的盒子（div或者dt）定義如下樣式：

height:0;   //高度設(shè)置為0
width:23%;    //使用百分比寬度和百分比邊距
margin:0 1%;
position: relative;  //定位
padding-bottom:75%;  //使用padding來按照比例撐開div
overflow: hidden;    //溢出部分隱藏

這時候盒子內(nèi)部的圖片設(shè)置寬度百分百，高度自適應(yīng)，定位在（0,0）點，圖片會被外層盒子自動截取，因為外層的盒子padding和寬度都是百分比的，所以整個布局是百分比顯示的。

position: absolute;    //定位在0,0位置，解決padding占高圖片不在最頂端問題
left: 0;
top: 0;
width: 100%            //自適應(yīng)高度，寬度百分比
height: auto;

優(yōu)點如下：

按照寬度的比高度的百分比來設(shè)置padding，可視區(qū)域按照比例縮放

解決圖片變形的困擾。

一次布局多終端友好

云服務(wù)器 GPU云服務(wù)器響應(yīng)式布局 asp如何響應(yīng)式布局 html響應(yīng)式導(dǎo)布局響應(yīng)式

文章版權(quán)歸作者所有，未經(jīng)允許請勿轉(zhuǎn)載,若此文章存在違規(guī)行為，您可以聯(lián)系管理員刪除。

轉(zhuǎn)載請注明本文地址：http://m.specialneedsforspecialkids.com/yun/51138.html

相關(guān)文章

不規(guī)則圖片列表實現(xiàn)響應(yīng)式布局

摘要：優(yōu)點在于響應(yīng)式布局非常方便，都是按照比例進(jìn)行的縮放，弊端是在于如果圖片不規(guī)則，那么圖片變形是難免的。一次布局多終端友好技術(shù)開發(fā)和實際運(yùn)營總是有很大差別的，比如常見的圖片列表，一般設(shè)計圖上都是固定尺寸大小的，但是實際操作起來并沒有太多人去ps修剪圖片到知道的尺寸，大部分都是差不多比例的圖片就直接上傳了，為了解決不規(guī)則圖片列表展示問題有相應(yīng)的解決方案例如瀑布流，或者相冊等，但是對于多終端...

linkFly 2019-08-29 13:11 評論0 收藏0
css進(jìn)階

摘要：柵格系統(tǒng)用于處理頁面多終端適配的問題。它表示抓取對象以后拖放到另一個位置。目前，它是標(biāo)準(zhǔn)的一部分。精簡高效的命名準(zhǔn)則方法這篇文章發(fā)布于年月日，星期日，，歸類于相關(guān)。但是不會受到包含塊的限制，可能會溢出。一勞永逸的搞定 flex 布局尋根溯源話布局一切都始于這樣一個問題：怎樣通過 CSS 簡單而優(yōu)雅的實現(xiàn)水平、垂直同時居中。記得剛開始學(xué)習(xí) CSS 的時候，看到 float 屬性不由...

import. 2019-08-29 14:07 評論0 收藏0
關(guān)于響應(yīng)式布局，你必須要知道的

摘要：本文主要介紹一些響應(yīng)式布局容易忽略但又很重要的知識點。單位不僅僅可以用來設(shè)置字號，還可以設(shè)置任何盒模型的屬性，比如有一點優(yōu)勢就是可以和媒體查詢配合，實現(xiàn)響應(yīng)式布局運(yùn)用場景如果我們做的頁面只在移動端訪問，這是因為不兼容低版本的瀏覽器。一、前言響應(yīng)式Web設(shè)計可以讓一個網(wǎng)站同時適配多種設(shè)備和多個屏幕，可以讓網(wǎng)站的布局和功能隨用戶的使用環(huán)境（屏幕大小、輸入方式、設(shè)備/瀏覽器能力）而變化。...

Eirunye 2019-08-02 11:56 評論0 收藏1
關(guān)于響應(yīng)式布局，你必須要知道的

摘要：本文主要介紹一些響應(yīng)式布局容易忽略但又很重要的知識點。單位不僅僅可以用來設(shè)置字號，還可以設(shè)置任何盒模型的屬性，比如有一點優(yōu)勢就是可以和媒體查詢配合，實現(xiàn)響應(yīng)式布局運(yùn)用場景如果我們做的頁面只在移動端訪問，這是因為不兼容低版本的瀏覽器。一、前言響應(yīng)式Web設(shè)計可以讓一個網(wǎng)站同時適配多種設(shè)備和多個屏幕，可以讓網(wǎng)站的布局和功能隨用戶的使用環(huán)境（屏幕大小、輸入方式、設(shè)備/瀏覽器能力）而變化。...

nevermind 2019-08-29 17:11 評論0 收藏0
關(guān)于響應(yīng)式布局，你必須要知道的

摘要：本文主要介紹一些響應(yīng)式布局容易忽略但又很重要的知識點。單位不僅僅可以用來設(shè)置字號，還可以設(shè)置任何盒模型的屬性，比如有一點優(yōu)勢就是可以和媒體查詢配合，實現(xiàn)響應(yīng)式布局運(yùn)用場景如果我們做的頁面只在移動端訪問，這是因為不兼容低版本的瀏覽器。一、前言響應(yīng)式Web設(shè)計可以讓一個網(wǎng)站同時適配多種設(shè)備和多個屏幕，可以讓網(wǎng)站的布局和功能隨用戶的使用環(huán)境（屏幕大小、輸入方式、設(shè)備/瀏覽器能力）而變化。...

amuqiao 2019-08-23 12:45 評論0 收藏0