国产xxxx99真实实拍_久久不雅视频_高清韩国a级特黄毛片_嗯老师别我我受不了了小说

資訊專欄INFORMATION COLUMN

前端通過background實現圖片裁剪顯示的方法

Seay / 2377人閱讀

摘要：可以是真實圖片路徑或使用漸變創建的背景圖像指定對象的背景圖像位置。指定對象的背景圖像顯示的原點。

前端圖片展示

在前端處理圖片是非常常見的，而圖片展示又存在一個最大的問題：適應，
可以看看這種情況：

固定空間展示圖片

空間是 100px100px，圖片是 6060

空間是空間是 100px100px，圖片是 160px240px

空間是空間是 100px100px，圖片是 240px160px

就圖片展示而言，按寬高比進行縮放是最好的結果，寬高1：1的話，放到正方形空間內很好，可是如果是1：1.5的圖片需要放到正方形頁面容器里面呢？

目前需要前端處理的方式是使用background來操作，而不是img元素，需要以下幾個屬性的配合：

background-image ：指定對象的背景圖像。可以是真實圖片路徑或使用漸變創建的“背景圖像”

background-position ：指定對象的背景圖像位置。

background-size ：指定對象的背景圖像的尺寸大小。

background-repeat ：指定對象的背景圖像如何鋪排填充。

background-attachment ：指定對象的背景圖像是隨對象內容滾動還是固定的。

background-origin ：指定對象的背景圖像顯示的原點。

background-clip ：指定對象的背景圖像向外裁剪的區域。

background-color ：指定對象的背景顏色。

background的背景圖片裁剪

為了使圖片能夠按照正常的寬高比顯示，可以理解成以下幾步操作：

固定寬高的容器元素，設置背景圖片

把背景圖片按照原始的寬高比伸縮，直到能夠完全填充住容器元素的背景，容器的寬高比和背景圖片的寬高比不一樣時，會存在背景圖片寬或者高大于容器的情況，；

把背景圖片調整，使得多余的圖片部分能夠相對于容器對稱展示，

截去顯示在容器外的背景圖片，只顯示容器內的圖片，大功告成；

代碼可以如下書寫：

background-image: url(test.img);
// background-size這個需要注意，大小需要看伸縮時是寬度會有富余還是高度會有富余，有富余者為auto，剛好填充滿的就是100%
//比如寬高分別： 容器是100px*100px的，圖片是240px*200px，那么在縮小填充容器時圖片的高度會先觸及到容器的邊緣，也就是填滿容器時，寬度有富余為auto，高度為100%；
background-size: auto 100%;  // 可以使用cover
background-position: center; //背景圖片居中顯示，讓多余部分相對容器對此展示
background-repeat: no-repeat;
background-origin: border-box; //從border開始填充
background-clip: border-box;  //border外的多余背景圖片不展示，截取掉，

可以使用background的縮寫模式：

style="background:url(test.img) center/auto 100% no-repeat border-box border-box"

需要注意的是background-size的書寫需要看情況而變
background-size這個需要注意，大小需要看伸縮時是寬度會有富余還是高度會有富余，有富余者為auto，剛好填充滿的就是100%

比如寬高分別：
容器是100px100px的，圖片是240px200px，那么在縮小填充容器時圖片的高度會先觸及到容器的邊緣，也就是填滿容器時，寬度有富余為auto，高度為100%；
background-size: auto 100%;
所以可以考慮使用cover這個值，background-size:cover;

參考：http://css.doyoe.com/properti...

文章版權歸作者所有，未經允許請勿轉載,若此文章存在違規行為，您可以聯系管理員刪除。

轉載請注明本文地址：http://specialneedsforspecialkids.com/yun/115538.html

相關文章

  • 前端通過background實現圖片裁剪顯示的方法

    摘要：可以是真實圖片路徑或使用漸變創建的背景圖像指定對象的背景圖像位置。指定對象的背景圖像顯示的原點。 前端圖片展示 在前端處理圖片是非常常見的，而圖片展示又存在一個最大的問題：適應，可以看看這種情況： 固定空間展示圖片 空間是 100px100px，圖片是 6060 空間是空間是 100px100px，圖片是 160px240px 空間是空間是 100px100px，圖片是 240px...

    xioqua 評論0 收藏0

  • vue-avatar-tailor，vue頭像裁剪組件

    摘要：實現原理簡單，純技術處理圖片，幾乎不需要用到相關知識面向人群急于使用頭像裁剪組件的同學。裁剪框初始寬高上傳圖片后，裁剪區將預設為最大裁剪范圍。支持矩形裁剪目前九宮僅支持將圖片裁剪為正方形，不能裁剪為矩形，該功能將在后續優化。 項目簡介 本組件是vue下的頭像裁剪組件，可以直接拷貝代碼使用，無需安裝依賴 使用九宮格進行裁剪，自由選擇裁剪區域。 實時預覽裁剪后效果。 可以將裁剪好的圖片，...

    imccl 評論0 收藏0

  • 巧用css的border屬性完成對圖片編輯功能的性能優化

    摘要：一需求場景最近閑來無事，提出了一個要求，研究相關代碼并完成一個關于編輯圖片功能的性能優化，該功能的主要界面展示如下通過了幾分鐘的短暫試用，發現就是一個簡單的裁剪并保存用戶選擇并上傳的圖片作為用戶頭像的功能。一、需求場景： 最近閑來無事，boss提出了一個要求，研究相關代碼并完成一個關于編輯圖片功能的性能優化，該功能的主要界面展示如下： 通過了幾分鐘的短暫試用，發現就是一個簡單的裁剪并保存用...

    番茄西紅柿 評論0 收藏0

  • 不可思議的CSS之clip-path

    摘要：一個用來生成各種形狀包括隨意拖拉自定義并且可以直接生成代碼的網站。兼容性目前兼容性較差，和直接不支持，考慮兼容性的同學可以暫時等等。透明區域表示被裁剪的區域基本圖形定義一個矩形。語法說明可選，表示填充規則用來確定該多邊形的內部。 本文首發于 我的博客 曾經和某位朋友在聊天中討論過這樣一個話題：綜合90%的網站的布局以及頁面中的元素不是方的，就是圓的。就像所有的顏色都是由三原色（RGB）...

    walterrwu 評論0 收藏0

  • 淺談 CSS Sprites 雪碧圖應用

    摘要：編寫配置文件，以下是關鍵配置代碼雪碧圖合并輸出到文件參數執行目錄參數生成的和圖片的文件名之所以推薦，是因為非常的靈活，看懂模塊的可以根據你的項目情況編寫對應的配置文件。 showImg(https://segmentfault.com/img/bVGpAw?w=518&h=156); 前言 網站開發90%會用到小圖標， 多小圖標調用顯示是前端開發常見的問題；目前小圖標顯示常見有兩種方式...

    MkkHou 評論0 收藏0

發表評論

0條評論

最新活動
閱讀需要支付1元查看
<