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

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

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

原圖如下
結果如下

1.使用絕對定位+transform

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

<style>
.img-box1 {
    width: 200px;
    height: 200px;
    position: relative;
    overflow: hidden;
}
.img-box1 img {
    height: 200px;
    position: absolute;
    left: 50%;
    transform: translate(-50%,0);
}
</style>

2.使用display:flex屬性。

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

<style>
.img-box2 {
    width: 200px;
    height: 200px;
    overflow: hidden;
    display: flex;
    display: -webkit-flex; /* Safari */
    justify-content: center;
    -webkit-justify-content: center; /* Safari 6.1+ */
    align-items: center;
    border: solid 1px black;
}
.img-box2 img {
    height: 200px;
}
</style>

3.大比例負margin

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

<style>
.img-box3 {
    width: 200px;
    height: 200px;
    overflow: hidden;
    text-align: center;
}
.img-box3 img {
    height: 200px;
    margin: 0 -300%;
}
</style>

html部分如下

我用的是絕對定位+transform
<div class="img-box1">
    <img src="http://pic.sucaibar.com/pic/201311/03/fbd9162fea.jpg" />
</div>
我用的是flex
<div class="img-box2">
    <img src="http://pic.sucaibar.com/pic/201311/03/fbd9162fea.jpg" />
</div>
我用的是左右大比例負margin
<div class="img-box3">
    <img src="http://pic.sucaibar.com/pic/201311/03/fbd9162fea.jpg" />
</div>

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