通過CSS解決圖片拉伸的問題
圖片拉伸
使用CSS ：
object-fit: cover;
background-size: 100% 100%;屬性介紹
object-fit?CSS?屬性指定可替換元素的內(nèi)容應(yīng)該如何適應(yīng)到其使用的高度和寬度確定的框。
您可以通過使用?object-position?屬性來切換被替換元素的內(nèi)容對(duì)象在元素框內(nèi)的對(duì)齊方式。
語法節(jié)
object-fit 屬性由下列的值中的單獨(dú)一個(gè)關(guān)鍵字來指定。
取值節(jié)
contain
被替換的內(nèi)容將被縮放，以在填充元素的內(nèi)容框時(shí)保持其寬高比。 整個(gè)對(duì)象在填充盒子的同時(shí)保留其長寬比，因此如果寬高比與框的寬高比不匹配，該對(duì)象將被添加“黑邊”。
cover
被替換的內(nèi)容在保持其寬高比的同時(shí)填充元素的整個(gè)內(nèi)容框。如果對(duì)象的寬高比與內(nèi)容框不相匹配，該對(duì)象將被剪裁以適應(yīng)內(nèi)容框。
fill
被替換的內(nèi)容正好填充元素的內(nèi)容框。整個(gè)對(duì)象將完全填充此框。如果對(duì)象的寬高比與內(nèi)容框不相匹配，那么該對(duì)象將被拉伸以適應(yīng)內(nèi)容框。
none
被替換的內(nèi)容將保持其原有的尺寸。
scale-down
內(nèi)容的尺寸與?none?或?contain?中的一個(gè)相同，取決于它們兩個(gè)之間誰得到的對(duì)象尺寸會(huì)更小一些。
背景圖片變暗
background-image: linear-gradient(rgba(0, 0, 0, 0.3), rgba(0, 0, 0, 0.3)), url(./images/bj.jpg);
object-fit: cover;
background-size: 100% 100%;
width: 980px;
height: 356px;
margin: 0 auto;