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

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

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

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

一、常見(jiàn)的圖片固定大小方式弊端

固定圖片寬高，圖片變形

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

不利于左右間距控制等

二、兩種解決方案

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

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

方案二：使用定位比例法

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

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

這時(shí)候盒子內(nèi)部的圖片設(shè)置寬度百分百，高度自適應(yīng)，定位在（0,0）點(diǎn)，圖片會(huì)被外層盒子自動(dòng)截取，因?yàn)橥鈱拥暮凶觩adding和寬度都是百分比的，所以整個(gè)布局是百分比顯示的。

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

優(yōu)點(diǎn)如下：

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

解決圖片變形的困擾。

一次布局多終端友好

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

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

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

相關(guān)文章

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

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

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

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

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

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

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

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

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

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

amuqiao 2019-08-23 12:45 評(píng)論0 收藏0