圖片拉伸

• 參考鏈接：菜鳥
• 參考鏈接：MDN

使用CSS ：

object-fit: cover;
 background-size: 100% 100%;

屬性介紹

object-fit?CSS?屬性指定可替換元素的內容應該如何適應到其使用的高度和寬度確定的框。

您可以通過使用?object-position?屬性來切換被替換元素的內容對象在元素框內的對齊方式。

語法節

object-fit 屬性由下列的值中的單獨一個關鍵字來指定。

取值節

contain

被替換的內容將被縮放，以在填充元素的內容框時保持其寬高比。 整個對象在填充盒子的同時保留其長寬比，因此如果寬高比與框的寬高比不匹配，該對象將被添加“黑邊”。

cover

被替換的內容在保持其寬高比的同時填充元素的整個內容框。如果對象的寬高比與內容框不相匹配，該對象將被剪裁以適應內容框。

fill

被替換的內容正好填充元素的內容框。整個對象將完全填充此框。如果對象的寬高比與內容框不相匹配，那么該對象將被拉伸以適應內容框。

none

被替換的內容將保持其原有的尺寸。

scale-down

內容的尺寸與?none?或?contain?中的一個相同，取決于它們兩個之間誰得到的對象尺寸會更小一些。

背景圖片變暗

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;

相關推薦