對於平時項目開發中，經常要展示圖片。什麼水平居中顯示，垂直居中顯示，水平或垂直居中顯示...我們的髮際線就是這樣往後退的。 接下來要講的就是對於各種圖片佈局的css實現（這裡針對的是img標簽的不會使用到background） 1.最簡單的水平居中 .exa1{ width: 500px; heig ...
對於平時項目開發中，經常要展示圖片。什麼水平居中顯示，垂直居中顯示，水平或垂直居中顯示...我們的髮際線就是這樣往後退的。
接下來要講的就是對於各種圖片佈局的css實現（這裡針對的是img標簽的不會使用到background）
1.最簡單的水平居中
<style>
.exa1{
width: 500px;
height: 300px;
margin: 0 auto;
border: 1px solid #f00;
}
.exa1 img {
display: block;
width: 300px;
margin: 0 auto;
}
</style>
</head>
<body>
<h5>1.水平居中</h5>
<div class="exa1">
<img src="https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1513482866&di=b7de9d07063752ad42c09826014e5a8d&imgtype=jpg&er=1&src=http%3A%2F%2Fpic1.5442.com%2F2015%2F0305%2F07%2F001.jpg" alt="">
</div>
</body>
</html>效果如下：
2.垂直居中(這裡介紹兩種)
第一種:
在圖片父元素添加一個偽類before，利用vertical-align: middle的特性讓圖片垂直居中，不過感覺不是很方便
<style>
.exa2{
width: 500px;
height: 300px;
margin: 0 auto;
border: 1px solid #f00;
}
.exa2::before{
content: "";
display: inline-block;
height: 300px;
vertical-align: middle;
}
.exa2 img {
width: 300px;
vertical-align: middle;
}
</style>
<div class="exa2">
<img src="https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1513482866&di=b7de9d07063752ad42c09826014e5a8d&imgtype=jpg&er=1&src=http%3A%2F%2Fpic1.5442.com%2F2015%2F0305%2F07%2F001.jpg" alt="">
</div>第二種：
我比較推薦第二種使用css3的新屬性，不要跟我說相容，我不管。。。。
這裡主要用到transform的translateY它可以讓元素基於它本身移動，而且參數能填寫自身的百分百，看代碼好了
<style>
.exa2{
width: 500px;
height: 300px;
margin: 0 auto;
border: 1px solid #f00;
}
.exa2 img {
position: relative; // 這裡通過定位，也可以選擇用absolute，看自己需要移動相對容器50%，在向上移動自身的50%，就達到垂直居中的效果了
top: 50%;
transform: translateY(-50%);
}
</style>
<div class="exa2">
<img src="https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1513482866&di=b7de9d07063752ad42c09826014e5a8d&imgtype=jpg&er=1&src=http%3A%2F%2Fpic1.5442.com%2F2015%2F0305%2F07%2F001.jpg" alt="">
</div>效果如下：
垂直水平居中
這個我想通過上面說的應該也能猜到怎麼實現了
.exa2 img {
width: 300px;
position: relative;
top: 50%;
left: 50%;
transform: translate(-50%,-50%);
}
就是加個left和translateX，其它都一樣，如果要用垂直居中的第一種方法在父元素增加text-alegn:center;效果是一樣的。代碼就不貼了。
效果如下：
- ps: 上面說到都是圖片在位置上的轉換，其實還有一種更簡單的方法，就是object-position屬性，用這個輕鬆簡單快捷搞定所有你要的佈局，可是它有一個之名缺點就是，IE下全方位不支持。如果不用相容IE的建議直接懟這個。
用法：
object-position：value， value;
value可以是'center', 'left', 'bottom', 'right'或者是百分百，px；
圖片自適應寬度或高度100%
可能項目中會有這種情況，容器大小是固定的，可是圖片的尺寸確不同的。
這裡就可以用到object-fit了在通過垂直水平居中就可以達到很好的效果了（同樣這裡也是不相容大IE的）。下麵是object-fit的值：
fill
被替換的內容的大小，以填補該元素的內容框：對象的具體對象的大小是元素的使用寬度和高度。
contain
被替換的內容的大小，為自身寬高比不變，適應該元素的內容框的大小：它的具體對象的大小被解析為對元素的使用寬度和高度的含有約束。cover
被替換的內容的尺寸卻使元件的整個內容框，以保持其長寬比其具體的對象的大小被解析為針對元素的使用的寬度和高度的蓋約束。none
被替換的內容的尺寸卻使元件的整個內容框，以保持其長寬比其具體的對象的大小被解析為針對元素的使用的寬度和高度的蓋約束。scale-down
內容的尺寸仿佛none或contain指定了，取將導致更小的具體對象的大小。
用法:
img {
width: 100%;
height: 100%;
object-fit: contain;
}如果想要相容性好點可以用下麵的方法，不過缺點就是圖片的自身尺寸要比容器大才行：
<style>
.exa1{
width: 500px;
height: 400px;
margin: 0 auto;
border: 1px solid #f00;
}
.exa1 img {
display: block;
max-width: 100%;
max-height: 100%;
position: relative;
left: 50%;
top: 50%;
transform: translate(-50%, -50%);
}
</style>
</head>
<body>
<h5>圖片自適應寬度或高度100%</h5>
<div class="exa1">
<img src="https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1513482866&di=b7de9d07063752ad42c09826014e5a8d&imgtype=jpg&er=1&src=http%3A%2F%2Fpic1.5442.com%2F2015%2F0305%2F07%2F001.jpg" alt="">
</div>
</body>
</html>效果圖如下：
圖片要鋪滿整個容器，但是不能變形
這裡只能用到object-fit的cover；不過有相容性問題。
img {
width: 100%;
height: 100%;
object-fit: cover;
}效果如下:
