可調整大小的三列背景圖片/封面版式

背景封面和百分比寬度可以縮放並調整圖片以適合視口比16/9更加水平的情況。對於屏幕高度大於0.5625的寬度，外部佈局部分開始吃中心。在這種情況下，從左側和右側裁剪可能會更好，或者可能會在頂部和底部添加空白條。可調整大小的三列背景圖片/封面版式

請提供您已知的最佳實踐。非常感謝您的參與，和平，ayo。

<div class="bg"> 
</div> 
<div class="column" id="column_left"> 
</div> 
<div class="column" id="column_center"> 
</div> 
<div class="column" id="column_right"> 
</div>

CSS：

bg { 
    position: relative; 
    overflow: hidden; 
    height: 100%; 
    width: 100%; 
    max-width: 1920px; 
    background: url(images/1920/bg.png) no-repeat center 0 /cover; 
} 

.column { 
    max-width: 100%; 
    opacity: 0; 
    display: block; 
    -webkit-transition: opacity 0.5s ease-in-out; 
    -moz-transition: opacity 0.5s ease-in-out; 
    transition: opacity 0.5s ease-in-out; 
    position: absolute; 
    height: 100%; 

    &:hover { 
     opacity: 1; 
     cursor: pointer; 
    } 
} 

#column_left { 
    float: left; 
    left: 0; 
    width: 38.85%; 
    background: url(images/1920/left.png) no-repeat 0 0 /cover; 
} 

#column_center { 
    float: left; 
    left: 0; 
    right: 0; 
    margin-left: 26.17%; 
    width: 44.69%; 
    background: url(images/1920/center.png) no-repeat center 0 /cover; 
} 

#column_right { 
    float: right; 
    right: 0; 
    width: 39.58%; 
    background: url(images/1920/right.png) no-repeat 100% 0 /cover; 
}

來源

2017-06-13 Ed Dubnitsky

我只想用'對象的配合推薦：蓋;'確保萎縮視口的寬度縮小到圖像的中心，不收縮或拉伸。 –

我不確定其他人是否難以理解您的問題，但爲了提高您獲得答案的機會，最好提供一個使用佔位符圖片的片段/小提琴/ codepen，以準確顯示您的問題。 – WizardCoder

你能clearify您嘗試才達到什麼？從我能理解的事情來看，這聽起來像是你可能想要從封面變成包含背景大小？

background: url(images/1920/left.png) no-repeat 0 0 /cover;

到

background: url(images/1920/left.png) no-repeat 0 0; 
background-size: contain;

來源

2017-06-13 20:44:21

可調整大小的三列背景圖片/封面版式

回答

相關問題