如何讓圖像不滾動？

我想知道如何使圖像不滾動頁面的其餘部分。但是，我希望圖像具有一定的寬度百分比，並且瀏覽器會自動計算高度以顯示圖像，並且自動配置的圖像高度也會確定父div的高度。如何讓圖像不滾動？

下面的代碼可以讓我的圖像區域很好的位置和大小，很好的實際圖像：

.popPictureParent { 
 
    position: relative; 
 
    display: block; 
 
    width: 100%; 
 
    height: auto; 
 
    overflow: hidden; 
 
} 
 

 
.popPicture { 
 
    position: relative; 
 
    display: block; 
 
    width: 100%; 
 
    height: auto; 
 
} 
 

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

<div class="popPictureParent" id="picture1"> 
 
    <div class="popPicture"> 
 
    <img src="./files/painting_scene_smaller.png" alt="painting scene" /> 
 
    </div> 
 
</div>

我將如何使圖像不sccroll類似這樣的網站：https://www.thediyjoint.com/但有圖像大小和位置divs我現在擁有它嗎？我在網站上還有其他的東西，它不得侵入，這不是唯一的東西，所以。

我試過背景圖片的東西，使用固定的，絕對的，但都沒有工作。我需要瀏覽器根據給定的寬度百分比進行一些數學運算，以使圖像看起來不錯。

當我嘗試背景時，沒有選項可將父級的div寬度設置爲背景所需。這對我來說真的很複雜。如果需要更多信息，請發表評論。

編輯：事情是，我需要圖像作爲寬度和高度的佔位符，所以父div的大小。背景圖片不提供佔位符。此外，我需要圖像不顯示在其父div之外。

來源

2017-07-04 Eliter

不要使用''嘗試使用'背景image'，'背景sizing'和'背景attachment' –

請先問谷歌。我在第一次嘗試中發現它。 https://www.w3schools.com/cssref/pr_background-attachment.asp – only4

這裏是一個解決方案：

.popPicture{ 
    background-image: url('./files/painting_scene_smaller.png'); 
    background-repeat: no-repeat; 
    background-attachment: fixed; 
    }

來源

2017-07-04 06:36:36

你將不得不使用背景附件屬性

固定這個關鍵字意味着後臺固定關於的視。即使元素具有滾動機制，「固定」背景也不會隨元素一起移動。

，而不是添加img標籤的HTML，CSS使用添加背景圖像的包裝類在這種情況下.popPicture

例如：

.popPicture{ 
    background-image: url('/files/painting_scene_smaller.png'); 
    background-repeat: no-repeat; 
    background-attachment: fixed; 
}

你可以閱讀更多關於此屬性在這裏：https://developer.mozilla.org/en/docs/Web/CSS/background-attachment

此外，根據您的使用情況，您可以調整背景大小屬性

background-size CSS屬性指定背景圖像的大小。圖像的大小可以完全受到限制，或僅部分地保留其內在比例。

來源

2017-07-04 06:53:08 lakov

如何讓圖像不滾動？

回答

相關問題