如何獲取Jumbotron img以調整屏幕大小？

我正在製作一個帶有x10Host的小型項目學校網站，並且正在編寫自己的自定義HTML。頭版將會有一張小圖片來解釋我是誰以及我做了什麼。這是圖像：如何獲取Jumbotron img以調整屏幕大小？

當我使用下面的HTML和CSS，它完美地顯示出來（圖像顯示）：

HTML

<div class="jumbotron"> 
    <img src="Jumbotron.png"></img> 
</div>

CSS

.jumbotron{ 
    position:relative; 
    min-width:100%; 
    min-height:100%; 
    top:-50px; 
    left:-50px; 
} 
.jumbotron img{ 
    min-width:100%; 
    min-height:100%; 
}

它完美地表現爲這樣：

我遇到的唯一問題是，當我調整窗口的大小。目前，該窗口是1080p。如果我調整它的大小，出現這種情況：

有什麼辦法，我可以修改HTML或CSS，使圖像尺寸調整到客戶的屏幕？如果您想查看完整的HTML代碼，該網站是http://mrsquer.x10Host.com/。

來源

2016-02-26 JoshuaS3

.jumbotron{ 
      margin-left:-10px; 
      margin-top:-10px; 
      height:100%; 
      min-width:100%; 
      position:absolute;  
     } 
     .jumbotron img{ 
      height:100%; 
      width:100%; 
      max-width:100%; 
     }

嘗試一下本作的CSS

來源

2016-02-26 23:15:13

雖然有效，但該位置必須是相對的，不是絕對的。謝謝。 – JoshuaS3

歡迎您，如果您添加到css \t \t html，body {height：100％; height：100％; margin：0; }所以你也不需要margin-left和margin top，所以你應該刪除它們並改變爲相對的例子https://jsfiddle.net/Ljdxnwot/4/ –

您需要設置max-width: 100%; height:100%;將其限制在容器的寬度，但保持最大圖像高度。

來源

2016-02-26 23:18:22 MaxRocket

  <!doctype html> 
      <html> 
      <title>css testing</title> 
      <style type = "text/css"> 
       .jumbotron 
       { 
        position:relative; 
        width:100%; 
              max-width: 100%; 
        height:100%; 
       } 

       .jumbotron img 
       { 
        width:100%; 
        height: auto; 
       } 
      </style> 

      </head> 
      <body> 
       <div class="jumbotron"> 
        <img src="Jumbotron.png"></img> 
       </div> 
      </body> 
      </html>

img height必須設置爲'auto'，否則將無法正確縮放（如上面的代碼所示）。

這適用於任何尺寸的屏幕，但我不會使用它。

將img設置爲背景會給您更多的自由添加內容。和

height: 100%;

是不需要的，除非你想整個屏幕佔用的容器div。

如果你想要一個DIY網站，可能需要閱讀基本的html和css。玩的開心！

來源

2016-02-26 23:31:43

如何獲取Jumbotron img以調整屏幕大小？

回答

相關問題