如何由於背景尺寸（封面）而停止放大背景圖像？

Question

我正在創建一個網站，使用chrome進行調試。 我正在使用“ background-size：cover;”創建一個滾動頁面，其中包含全高圖像作為我的部門的背景圖像。 和“背景附件：固定；”。

在我PC上的chrome（移動）調試查看器上，即使有更多的滾動文本可以容納在圖像上，圖像仍保持相同大小，並且內容只是在沒有放大或變形的圖像上滾動。

上傳到s3並在我的移動設備上查看后，具有很多內容的div的背景圖像將照片放大了（假設這樣做是為了繼續覆蓋），使其看起來不太好。

到目前為止，我嘗試將內容包裝程序的背景附件更改為固定，然后滾動查看是否可行。 它沒。 唯一不允許背景圖像放大的是將背景大小從封面更改為100％80％;。 這樣可以保持原始縮放，但顯然不能覆蓋所有文本，從而導致一個全尺寸圖像div和下一個全尺寸圖像div之間存在間隙。

`    .second-page{
    background-image: linear-gradient(rgba(77, 77, 77, 0.5), rgba(77, 77, 77, 0.5)), url(images/background6_port.jpg);
    background-repeat: no-repeat;
    min-height: 100vh;
    min-width: 100vw;
    background-size: cover;
    position: relative;
    background-attachment: fixed;


}
.content{
    margin-right: 15%;
    margin-left: 15%;
}`

預期結果：背景圖像覆蓋了移動設備上的視口的100％，允許文本和其他內容在其上滾動而無需放大

實際結果：背景圖像放大以覆蓋所有內容區域，從而導致像素化和不良的視覺體驗。

Answer 1

在大多數情況下，我會在此站點上發布問題，而在我發布問題后，我就會給出答案。 對於處於類似情況的任何人，我通過添加

max-height: 100vh;
overflow-y: scroll;

希望這對別人有幫助！