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

import. 發(fā)布于2019-08-01 17:07 / 653人閱讀

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

最近項(xiàng)目改版，需要在一個(gè)正方形的盒子區(qū)域中顯示圖片，由于舊數(shù)據(jù)中都是橫向長(zhǎng)方形的圖片，舊數(shù)據(jù)又不能舍棄，產(chǎn)品就要求對(duì)于這種圖片進(jìn)行兩邊截取，在正方形盒子中只顯示圖片中間部分的（蛋）要（疼）求。

經(jīng)過(guò)一番嘗試一共找到3種可以成功實(shí)現(xiàn)的方法，在此分享一下。

原圖如下
結(jié)果如下

1.使用絕對(duì)定位+transform

這個(gè)方法已經(jīng)被廣泛用來(lái)使指定元素在盒子中上下左右居中了，同樣也適合上述場(chǎng)景

2.使用display:flex屬性。

不得不說(shuō)flex非常強(qiáng)大，設(shè)置了display:flex以后，可以通過(guò)簡(jiǎn)單設(shè)置justify-content以及align-items來(lái)規(guī)定內(nèi)部元素的呈現(xiàn)方式而不用做任何的計(jì)算。

3.大比例負(fù)margin

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

html部分如下

我用的是絕對(duì)定位+transform

    

我用的是flex

    

我用的是左右大比例負(fù)margin

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

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

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

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

相關(guān)文章

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

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

GHOST_349178 2019-08-29 12:53 評(píng)論0 收藏0
CSS 布局經(jīng)典問(wèn)題初步整理

摘要：布局經(jīng)典問(wèn)題初步整理標(biāo)簽前端本文主要對(duì)布局中常見(jiàn)的經(jīng)典問(wèn)題進(jìn)行簡(jiǎn)單說(shuō)明，并提供相關(guān)解決方案的參考鏈接，涉及到三欄式布局，負(fù)，清除浮動(dòng)，居中布局，響應(yīng)式設(shè)計(jì)，布局，等等。 CSS 布局經(jīng)典問(wèn)題初步整理標(biāo)簽：前端 [TOC] 本文主要對(duì) CSS 布局中常見(jiàn)的經(jīng)典問(wèn)題進(jìn)行簡(jiǎn)單說(shuō)明，并提供相關(guān)解決方案的參考鏈接，涉及到三欄式布局，負(fù) margin，清除浮動(dòng)，居中布局，響應(yīng)式設(shè)計(jì)，F(xiàn)l...

Amos 2019-08-29 12:36 評(píng)論0 收藏0
web前端（11）—— 頁(yè)面布局1

摘要：維護(hù)起來(lái)更加方便不足雪碧的最大問(wèn)題是內(nèi)存使用拼圖維護(hù)比較麻煩使的編寫(xiě)變得困難雪碧調(diào)用的圖片不能被打印我們可以使用綜合屬性制作通天，什么是通天呢，就是一般我們電腦的屏幕都是但是設(shè)計(jì)師給我們的圖都會(huì)比這個(gè)大，那么我們可以此屬性來(lái)制作通天。要說(shuō)頁(yè)面布局的話(huà)，那就必須說(shuō)說(shuō)margin，padding，和background。這三個(gè)屬性其實(shí)都是前面講過(guò)的，這里還是再次講解以下，為什么呢？因?yàn)槭沁@樣的...

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

摘要：中間左欄右欄清除浮動(dòng)如下圖缺點(diǎn)結(jié)構(gòu)不正確多了一層標(biāo)簽布局左欄中間右欄如下圖缺點(diǎn)兼容性問(wèn)題參考文章 W3C標(biāo)準(zhǔn) 由萬(wàn)維網(wǎng)聯(lián)盟制定的一系列標(biāo)準(zhǔn)，包括：結(jié)構(gòu)化標(biāo)準(zhǔn)語(yǔ)言（HTML和XML）表現(xiàn)標(biāo)準(zhǔn)語(yǔ)言（CSS）行為標(biāo)準(zhǔn)語(yǔ)言（DOM和ECMAScript） CSS中的定位機(jī)制在CSS中存在三種定位機(jī)制：標(biāo)準(zhǔn)文檔流（Normal flow）浮動(dòng)（Floats）絕對(duì)定位（Abs...

LancerComet 2019-08-29 15:27 評(píng)論0 收藏0
CSS 設(shè)計(jì)指南學(xué)習(xí)筆記二

摘要：原文地址本篇文章是筆者的設(shè)計(jì)指南學(xué)習(xí)筆記的第二部分，由于最近都在準(zhǔn)備期末考的事，所以都沒(méi)來(lái)得及對(duì)設(shè)計(jì)指南進(jìn)行一些總結(jié)，沒(méi)有看之前第一部分的話(huà)也可以從這里傳送過(guò)去。原文地址：http://justclear.github.io/css-stylin-with-css-note-2 本篇文章是筆者的《CSS 設(shè)計(jì)指南》學(xué)習(xí)筆記的第二部分，由于最近都在準(zhǔn)備期末考的事，所以都沒(méi)來(lái)得及對(duì) ...

printempw 2019-08-30 12:47 評(píng)論0 收藏0