圖像響應式網頁設計的頂部作物

我想在桌面顯示器上顯示寬幅圖像（圖像的頂部爲max-height：500px;）和移動設備的原始高寬比。圖像響應式網頁設計的頂部作物

我在Wordpress網站上使用龍門框架。我已經使用了CSS工作來強制圖像在父裝箱容器外顯示全寬。

示例除了在圖像高度小於最大高度時將空間推到頂部時，這種作物從頂部開始？

.boxed-container{ 
 
    margin:30px; 
 
    padding: 30px; 
 
    background:red; 
 
} 
 
.bg-img{ 
 
    position: relative; 
 
    display: block; 
 
    overflow: hidden; 
 
    padding: 0px; 
 
    margin: 0px; 
 
    width: 100vw; 
 
    height: 100vh; 
 
    max-height: 300px; 
 
    left: 50%; 
 
    right: 50%; 
 
    margin-left: -50vw !important; 
 
    margin-right: -50vw !important; 
 
    background: url(http://www.photographymad.com/files/images/rule-of-thirds-movement.jpg) no-repeat bottom; 
 
    background-size: 100% auto; 
 
} 
 
h1 { 
 
    position: absolute; 
 
    width: 100%; 
 
    bottom: 0px; 
 
    text-align: center; 
 
    margin-bottom: 0px; 
 
}

<div class="boxed-container"> 
 
    This is where the boxed content belongs. 
 
    <div class="bg-img"> 
 
    <h1>This is the header</h1> 
 
    </div> 
 
</div>

來源

2017-04-20 Lin Baird

你能說出你的目標更清楚些嗎？ – MeltingDog

你看到我的答案嗎？ –

是的，我確實看到你的答案謝謝你，這是非常有益的和工作。 –

此代碼裁剪圖像用正確的方式object-fit:cover

#image { 
    width: 100%;; 
    height: 500px; 
    object-fit:cover; 
}

並與@media你可以改變高度，並與無論你喜歡，以適應屏幕分辨率。

旁註：這在IE中不起作用。

編輯：

object-fit:

fill 被替換的內容的尺寸以填充元素的內容框：該對象的具體對象大小是元素的使用寬度和高度。

contain 被替換的內容的大小可以保持其寬高比，同時適合元素的內容框：其具體對象大小被解析爲包含元素的使用寬度和高度的約束。

cover 被替換的內容的尺寸卻使元件的整個內容框，以保持其高寬比：其具體的對象大小被解析爲抵靠元件的使用寬度和高度的蓋約束。

none 被替換的內容不被調整大小以適應元件的內容盒內：使用默認的不帶指定尺寸上漿算法和默認的對象的大小等於替換元素的使用寬度被確定的對象的具體對象的尺寸和高度。

scale-down 內容的大小就好像沒有指定任何內容或包含內容，取決於哪一個會導致較小的具體對象大小。

來源

2017-04-20 10:14:41

圖像響應式網頁設計的頂部作物

回答

相關問題