截圖圖片兩邊使圖片在盒子里居中的三種方法

GHOST_349178 發布于2019-08-29 12:53 / 2543人閱讀

摘要：部分如下我用的是絕對定位我用的是我用的是左右大比例負以上就是截取隱藏圖片兩側讓圖片在盒子居中的種方法了，希望能能對大家有用。

最近項目改版，需要在一個正方形的盒子區域中顯示圖片，由于舊數據中都是橫向長方形的圖片，舊數據又不能舍棄，產品就要求對于這種圖片進行兩邊截取，在正方形盒子中只顯示圖片中間部分的（蛋）要（疼）求。

經過一番嘗試一共找到3種可以成功實現的方法，在此分享一下。

原圖如下
結果如下

1.使用絕對定位+transform

這個方法已經被廣泛用來使指定元素在盒子中上下左右居中了，同樣也適合上述場景

2.使用display:flex屬性。

不得不說flex非常強大，設置了display:flex以后，可以通過簡單設置justify-content以及align-items來規定內部元素的呈現方式而不用做任何的計算。

3.大比例負margin

不得不說最后一種方法略微詭異，一般margin:0 -100%;即可，但在實際使用過程用發現有時會失效，懷疑和圖片、盒子還有屏幕寬度之間的比例有關系，所以設成了-300%，設成-300%以后目前一切正常。

html部分如下

我用的是絕對定位+transform

    

我用的是flex

    

我用的是左右大比例負margin

以上就是截取（隱藏）圖片兩側讓圖片在盒子居中的3種方法了，希望能能對大家有用。

GPU云服務器云服務器 js使圖片變清晰了 html5使圖片居中云計算的三種服務模式 asp支持的三種控件

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

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

截圖圖片兩邊使圖片在盒子里居中的三種方法

摘要：部分如下我用的是絕對定位我用的是我用的是左右大比例負以上就是截取隱藏圖片兩側讓圖片在盒子居中的種方法了，希望能能對大家有用。最近項目改版，需要在一個正方形的盒子區域中顯示圖片，由于舊數據中都是橫向長方形的圖片，舊數據又不能舍棄，產品就要求對于這種圖片進行兩邊截取，在正方形盒子中只顯示圖片中間部分的（蛋）要（疼）求。經過一番嘗試一共找到3種可以成功實現的方法，在此分享一下。原圖如下...

import. 2019-08-01 17:07 評論0 收藏0
CSS 布局經典問題初步整理

摘要：布局經典問題初步整理標簽前端本文主要對布局中常見的經典問題進行簡單說明，并提供相關解決方案的參考鏈接，涉及到三欄式布局，負，清除浮動，居中布局，響應式設計，布局，等等。 CSS 布局經典問題初步整理標簽：前端 [TOC] 本文主要對 CSS 布局中常見的經典問題進行簡單說明，并提供相關解決方案的參考鏈接，涉及到三欄式布局，負 margin，清除浮動，居中布局，響應式設計，Fl...

Amos 2019-08-29 12:36 評論0 收藏0
web前端（11）—— 頁面布局1

摘要：維護起來更加方便不足雪碧的最大問題是內存使用拼圖維護比較麻煩使的編寫變得困難雪碧調用的圖片不能被打印我們可以使用綜合屬性制作通天，什么是通天呢，就是一般我們電腦的屏幕都是但是設計師給我們的圖都會比這個大，那么我們可以此屬性來制作通天。要說頁面布局的話，那就必須說說margin，padding，和background。這三個屬性其實都是前面講過的，這里還是再次講解以下，為什么呢？因為是這樣的...

番茄西紅柿 2019-04-23 13:11 評論0 收藏0
CSS 布局方式

摘要：中間左欄右欄清除浮動如下圖缺點結構不正確多了一層標簽布局左欄中間右欄如下圖缺點兼容性問題參考文章 W3C標準由萬維網聯盟制定的一系列標準，包括：結構化標準語言（HTML和XML）表現標準語言（CSS）行為標準語言（DOM和ECMAScript） CSS中的定位機制在CSS中存在三種定位機制：標準文檔流（Normal flow）浮動（Floats）絕對定位（Abs...

LancerComet 2019-08-29 15:27 評論0 收藏0
CSS 設計指南學習筆記二

摘要：原文地址本篇文章是筆者的設計指南學習筆記的第二部分，由于最近都在準備期末考的事，所以都沒來得及對設計指南進行一些總結，沒有看之前第一部分的話也可以從這里傳送過去。原文地址：http://justclear.github.io/css-stylin-with-css-note-2 本篇文章是筆者的《CSS 設計指南》學習筆記的第二部分，由于最近都在準備期末考的事，所以都沒來得及對 ...

printempw 2019-08-30 12:47 評論0 收藏0