javascript / CSS 圖片寬度=瀏覽器高度

Question

你好，很抱歉這個奇怪的標題。 在我的網站上，我想要一個與瀏覽器高度完全相同的 header 圖像。 因此，當您打開網站時，您應該會看到一張圖片，它覆蓋了整個屏幕，但不是背景圖片。 這樣，如果向下滾動，您應該能夠遠離圖像。 問題是，如果我說“瀏覽器高度 = 像素高度”，圖片的格式就會改變。

因此，我需要一個 function，它會自動將圖片的寬度更改為瀏覽器的高度，或者更確切地說是瀏覽器的垂直像素數量。 例如，如果您滾動圖片，則不應更改。

到目前為止，我只嘗試過 CSS，因為我沒有使用 javascript 的經驗。 在訪問了許多網站后，我仍然沒有找到解決此問題的方法。 在這里，您可以看到網站在 PC 和移動設備上的外觀。

但是，如果我嘗試查看移動版本，它看起來像這樣，即使它應該看起來像第一張圖片。

在這里，您可以看到一個完全符合我要求的網站示例。 在那里你可以看到圖片覆蓋了整個屏幕高度並且如果你滾動不會改變（唯一的區別是，我不希望圖片覆蓋整個屏幕（左右）。（ https：/ /restaurant-am-bertasee.eatbu.com/?lang=de )

非常感謝，任何幫助表示贊賞。

Answer 1

您是否嘗試將僅媒體屬性添加到 css？ 我使用的最大寬度低於 428 像素，因為這主要用於 iPhone 13，但您可以根據需要更改它。

.imageexample {

顯示：塊；

寬度：428px；

最大寬度：100%；

高度：自動；

邊距：0 自動；

}

。盒子 {

顯示：內聯塊；

寬度：100%；

文本對齊：居中；

}

@media only screen and (max-width: 428px)

{ 圖像示例

{

寬度：100%；

}

}