使圖像縮小時，窗口大小調整

嗨，大家好我有一個背景圖片設置爲背景，我想它，以便當用戶按比例縮小的窗口，它會隨之調整：使圖像縮小時，窗口大小調整

HTML：

<div class="parallax"> 
    </div>

CSS：

.parallax { 
    background-image: url("../Images/back1.jpg"); 
    min-height: 700px; 
    background-attachment: fixed; 
    background-position: center; 
    background-repeat: no-repeat; 
    background-size: cover; 
    padding: 100px 20px; 
}

我得到它的時候，我改變background-size: cover; to contain工作，但它減少了一些圖像的從左側和右側。

小提琴鏈接：here

感謝

來源

2017-09-14 RonTheOld

你的小提琴完美的作品在這裏 - 在圖像大小調整 – Johannes

@Johannes不是當u縮小它dosent窗口 – RonTheOld

真的，它（？） - 我在Firefox的Mac – Johannes

當window爲resized時，下面的代碼也會使背景圖像響應。我已更新您的css代碼，刪除了min-height和背景fixed並在頂部和底部製作了padding百分比。

.parallax { 
 
    background: url(https://wallpaperscraft.com/image/coffee_hand_glass_scarf_113704_1366x768.jpg) no-repeat center/cover; 
 
    padding: 30% 0; 
 
}

<div class="parallax"> 
 
</div>

來源

2017-09-15 04:26:10 bellabelle

除了我的意見，這裏是我寫在最後的評論 - 一個普通img標籤與width: 100%和height: auto，而不是一個背景圖像：

img { 
 
    width: 100%; 
 
    height: auto; 
 
}

<div> 
 
    <img src="https://wallpaperscraft.com/image/coffee_hand_glass_scarf_113704_1366x768.jpg"> 
 
</div>

來源

2017-09-14 21:44:08 Johannes

使圖像縮小時，窗口大小調整

回答

相關問題