背景圖像（CSS）的縮放寬度問題

我是一個圖像的哈維格麻煩，通過使用CSS中的「包含」在頂部圖像和下一個段落之間添加了巨大的間距。當我使用「覆蓋」沒有間距問題，但圖片寬度太高。背景圖像（CSS）的縮放寬度問題

我使用這個在CSS

.headerLine{ 
position: relative; 
width: 100%; 
overflow: hidden; 
height: auto; 
background-repeat: no-repeat; 
background-position: center top; 
background-image: url(../images/bgTop.jpg); 
-webkit-background-size: cover; 
-moz-background-size: cover; 
-o-background-size: cover; 
background-size: contain;

我upoaded 100％的桌面圖片，使用Cover，採用包含一個用於所希望的結果在這裏：Description

來源

2016-02-08 user2279956

你有沒有考慮包括圖像作爲<img>而不是作爲背景圖片？這將導致headerLine div動態更改高度以匹配子圖像。

HTML：

<div class="headerLine"> 
    <img src="sampleimg.jpg" alt="Sample Image" width="600" height="200"> 
</div>

CSS：

.headerLine img { 
    display: block; 
    width: 100%; 
    height: auto; 
}

從W3學校關於背景大小：

背景封面：

縮放的背景圖像是作爲大盡可能讓背景區域完全被背景圖像覆蓋。一些份背景圖像可能無法考慮到背景定位區域背景罩內將縮放圖像

背景內含：

縮放圖像以最大尺寸，使得它的兩個寬度和其高度可以適合內容區域

來源

2016-02-08 23:30:50 Carlton

背景圖像（CSS）的縮放寬度問題

回答

相關問題