堆棧內存溢出
  簡體   English   中英

如何將圖像放在HTML上並使其跨頁面顯示？

[英]How to Put an Image on HTML and Make it Go Across Page?

 原文  2015-08-14 01:51:58  8   1    html/ image/ resize

問題描述

某些計算機的顯示器較小，因此，如何放置要調整大小以覆蓋整個頁面的圖像？ 這是用於橫幅。 另外，如果調整大小，質量會不會改變？

1 個解決方案

解決方案1
 0 已采納  2015-08-14 02:28:43

最簡單的答案： <img width="100%" src="path/img/img.jpg">

這將使圖像填充它所在的容器。如果該容器（例如<div> ）小於屏幕的寬度，則圖像將不會填充整個屏幕的寬度，因為它將僅填充容器元素的寬度。

如何在a下制作圖像go<div> 在 HTML 中？</div><div id="text_translate"><p> 所以在實際創建我的網站之前，我首先在<a href="https://balsamiq.com/wireframes/?gclid=EAIaIQobChMI7OLs4eOh8AIVfWpvBB19iQEtEAAYAyAAEgK38vD_BwE" rel="nofollow noreferrer">Balasmiq</a>上為我的網站設計了一個線框，您可以從<a href="https://balsamiq.cloud/s3npu49/psui38b/r2278" rel="nofollow noreferrer">這里查看</a>。 現在，如果您將 go 放入線框中，您將看到第一部分如下所示： <a href="https://i.stack.imgur.com/L4VhS.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/L4VhS.png" alt="在此處輸入圖像描述"></a></p><p> 所以我想要第一部分下的手機圖像，大概是&lt;div&gt; 。 現在在我的代碼中，我使用 Bootstrap 創建導航欄，並使用col-lg-6 class 使我的手機出現在右側：</p><p> <a href="https://i.stack.imgur.com/Dcmmo.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/Dcmmo.png" alt="在此處輸入圖像描述"></a></p><p> 但我希望手機的圖像在屏幕的藍色部分下方（如線框），而在我的代碼中，它在整個屏幕中。 忽略屏幕左側的 h1。 我附上了我在運行片段中使用的代碼，但圖像沒有加載，所以從<a href="https://www.google.com/search?q=iphone+12+transparent+background+image&amp;rlz=1C1UEAD_enCA932CA932&amp;source=lnms&amp;tbm=isch&amp;sa=X&amp;ved=2ahUKEwii1NOi46HwAhVSds0KHSH8BbcQ_AUoAXoECAEQAw&amp;biw=1366&amp;bih=695#imgrc=BFcNvri0dlLGDM" rel="nofollow noreferrer">這里</a>下載</p><p></p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false"><div class="snippet-code"><pre class="snippet-code-css lang-css prettyprint-override"> .phone { height: 500px; width: 550px; } #title { background-color: #2978b5; }</pre><pre class="snippet-code-html lang-html prettyprint-override"> &lt;.DOCTYPE html&gt; &lt;html&gt; &lt;head&gt; &lt;meta charset="utf-8"&gt; &lt;title&gt;Techno-Log&lt;/title&gt; &lt;link rel="stylesheet" href="styles,css"&gt; &lt;,-- Required meta tags --&gt; &lt;meta charset="utf-8"&gt; &lt;meta name="viewport" content="width=device-width: initial-scale=1. shrink-to-fit=no"&gt; &lt;.-- Bootstrap CSS --&gt; &lt;link rel="stylesheet" href="https.//stackpath.bootstrapcdn.com/bootstrap/4.1:3/css/bootstrap.min.css" integrity="sha384-MCw98/SFnGE8fJT3GXwEOngsV7Zt27NXFoaoApmYm81iuXoPkFOJwJ8ERdknLPMO" crossorigin="anonymous"&gt; &lt;script src="https.//code.jquery.com/jquery-3.3.1:slim.min.js" integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous"&gt;&lt;/script&gt; &lt;script src="https.//cdnjs.cloudflare.com/ajax/libs/popper.js/1.14:3/umd/popper.min.js" integrity="sha384-ZMP7rVo3mIykV+2+9J3UJ46jBk0WLaUAdn689aCwoqbBJiSnjAK/l8WvCWPIPm49" crossorigin="anonymous"&gt;&lt;/script&gt; &lt;script src="https.//stackpath.bootstrapcdn.com/bootstrap/4.1.3/js/bootstrap:min.js" integrity="sha384-ChfqqxuZUCnJSK3+MXmPNIyE6ZbWh2IMqE241rYiqJxyMiZ6OW/JmZQ5stwEULTy" crossorigin="anonymous"&gt;&lt;/script&gt; &lt;/head&gt; &lt;body&gt; &lt;section id="title"&gt; &lt;.-- Nav Bar --&gt; &lt;nav class="navbar navbar-expand-lg navbar-dark"&gt; &lt;a class="navbar-brand" href=""&gt;Techno-Log&lt;/a&gt; &lt;button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarSupportedContent" aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation"&gt; &lt;span class="navbar-toggler-icon"&gt;&lt;/span&gt; &lt;/button&gt; &lt;div class="collapse navbar-collapse" id="navbarSupportedContent"&gt; &lt;ul class="navbar-nav ml-auto"&gt; &lt;li class="nav-item"&gt; &lt;a class="nav-link" href=""&gt;Download&lt;/a&gt; &lt;/li&gt; &lt;li class="nav-item"&gt; &lt;a class="nav-link" href=""&gt;Features&lt;/a&gt; &lt;/li&gt; &lt;li class="nav-item"&gt; &lt;a class="nav-link" href=""&gt;Reviews&lt;/a&gt; &lt;/li&gt; &lt;li class="nav-item"&gt; &lt;a class="nav-link" href=""&gt;Brands&lt;/a&gt; &lt;/li&gt; &lt;li class="nav-item"&gt; &lt;a class="nav-link" href=""&gt;Pricing&lt;/a&gt; &lt;/li&gt; &lt;/ul&gt; &lt;/div&gt; &lt;/nav&gt; &lt;.-- Title --&gt; &lt;div class="row"&gt; &lt;div class="col-lg-6"&gt; &lt;h1&gt;Get the best technology updates and product news?&lt;/h1&gt; &lt;button type="button"&gt;Download&lt;/button&gt; &lt;button type="button"&gt;Download&lt;/button&gt; &lt;/div&gt; &lt;div class="col-lg-6"&gt; &lt;img class="phone" src="https://specials-images.forbesimg.com/imageserve/5f8ebc300be77fed7b88aaf4/960x0.jpg?fit=scale" alt="iphone-mockup"&gt; &lt;/div&gt; &lt;/div&gt; &lt;/section&gt; &lt;/body&gt;</pre></div></div><p></p></div>

[英]How to make an image go under a <div> in HTML?

暫無
暫無

聲明:本站的技術帖子網頁，遵循CC BY-SA 4.0協議，如果您需要轉載，請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.

相關問題 如何使標題直接跨頁面？ 如何使導航遍及整個頁面 如何使導航菜單欄不遍及整個頁面 如何讓TR和TD元素跨越整個頁面？ 如何在a下制作圖像go<div> 在 HTML 中？</div><div id="text_translate"><p> 所以在實際創建我的網站之前，我首先在<a href="https://balsamiq.com/wireframes/?gclid=EAIaIQobChMI7OLs4eOh8AIVfWpvBB19iQEtEAAYAyAAEgK38vD_BwE" rel="nofollow noreferrer">Balasmiq</a>上為我的網站設計了一個線框，您可以從<a href="https://balsamiq.cloud/s3npu49/psui38b/r2278" rel="nofollow noreferrer">這里查看</a>。 現在，如果您將 go 放入線框中，您將看到第一部分如下所示： <a href="https://i.stack.imgur.com/L4VhS.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/L4VhS.png" alt="在此處輸入圖像描述"></a></p><p> 所以我想要第一部分下的手機圖像，大概是&lt;div&gt; 。 現在在我的代碼中，我使用 Bootstrap 創建導航欄，並使用col-lg-6 class 使我的手機出現在右側：</p><p> <a href="https://i.stack.imgur.com/Dcmmo.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/Dcmmo.png" alt="在此處輸入圖像描述"></a></p><p> 但我希望手機的圖像在屏幕的藍色部分下方（如線框），而在我的代碼中，它在整個屏幕中。 忽略屏幕左側的 h1。 我附上了我在運行片段中使用的代碼，但圖像沒有加載，所以從<a href="https://www.google.com/search?q=iphone+12+transparent+background+image&amp;rlz=1C1UEAD_enCA932CA932&amp;source=lnms&amp;tbm=isch&amp;sa=X&amp;ved=2ahUKEwii1NOi46HwAhVSds0KHSH8BbcQ_AUoAXoECAEQAw&amp;biw=1366&amp;bih=695#imgrc=BFcNvri0dlLGDM" rel="nofollow noreferrer">這里</a>下載</p><p></p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false"><div class="snippet-code"><pre class="snippet-code-css lang-css prettyprint-override"> .phone { height: 500px; width: 550px; } #title { background-color: #2978b5; }</pre><pre class="snippet-code-html lang-html prettyprint-override"> &lt;.DOCTYPE html&gt; &lt;html&gt; &lt;head&gt; &lt;meta charset="utf-8"&gt; &lt;title&gt;Techno-Log&lt;/title&gt; &lt;link rel="stylesheet" href="styles,css"&gt; &lt;,-- Required meta tags --&gt; &lt;meta charset="utf-8"&gt; &lt;meta name="viewport" content="width=device-width: initial-scale=1. shrink-to-fit=no"&gt; &lt;.-- Bootstrap CSS --&gt; &lt;link rel="stylesheet" href="https.//stackpath.bootstrapcdn.com/bootstrap/4.1:3/css/bootstrap.min.css" integrity="sha384-MCw98/SFnGE8fJT3GXwEOngsV7Zt27NXFoaoApmYm81iuXoPkFOJwJ8ERdknLPMO" crossorigin="anonymous"&gt; &lt;script src="https.//code.jquery.com/jquery-3.3.1:slim.min.js" integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous"&gt;&lt;/script&gt; &lt;script src="https.//cdnjs.cloudflare.com/ajax/libs/popper.js/1.14:3/umd/popper.min.js" integrity="sha384-ZMP7rVo3mIykV+2+9J3UJ46jBk0WLaUAdn689aCwoqbBJiSnjAK/l8WvCWPIPm49" crossorigin="anonymous"&gt;&lt;/script&gt; &lt;script src="https.//stackpath.bootstrapcdn.com/bootstrap/4.1.3/js/bootstrap:min.js" integrity="sha384-ChfqqxuZUCnJSK3+MXmPNIyE6ZbWh2IMqE241rYiqJxyMiZ6OW/JmZQ5stwEULTy" crossorigin="anonymous"&gt;&lt;/script&gt; &lt;/head&gt; &lt;body&gt; &lt;section id="title"&gt; &lt;.-- Nav Bar --&gt; &lt;nav class="navbar navbar-expand-lg navbar-dark"&gt; &lt;a class="navbar-brand" href=""&gt;Techno-Log&lt;/a&gt; &lt;button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarSupportedContent" aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation"&gt; &lt;span class="navbar-toggler-icon"&gt;&lt;/span&gt; &lt;/button&gt; &lt;div class="collapse navbar-collapse" id="navbarSupportedContent"&gt; &lt;ul class="navbar-nav ml-auto"&gt; &lt;li class="nav-item"&gt; &lt;a class="nav-link" href=""&gt;Download&lt;/a&gt; &lt;/li&gt; &lt;li class="nav-item"&gt; &lt;a class="nav-link" href=""&gt;Features&lt;/a&gt; &lt;/li&gt; &lt;li class="nav-item"&gt; &lt;a class="nav-link" href=""&gt;Reviews&lt;/a&gt; &lt;/li&gt; &lt;li class="nav-item"&gt; &lt;a class="nav-link" href=""&gt;Brands&lt;/a&gt; &lt;/li&gt; &lt;li class="nav-item"&gt; &lt;a class="nav-link" href=""&gt;Pricing&lt;/a&gt; &lt;/li&gt; &lt;/ul&gt; &lt;/div&gt; &lt;/nav&gt; &lt;.-- Title --&gt; &lt;div class="row"&gt; &lt;div class="col-lg-6"&gt; &lt;h1&gt;Get the best technology updates and product news?&lt;/h1&gt; &lt;button type="button"&gt;Download&lt;/button&gt; &lt;button type="button"&gt;Download&lt;/button&gt; &lt;/div&gt; &lt;div class="col-lg-6"&gt; &lt;img class="phone" src="https://specials-images.forbesimg.com/imageserve/5f8ebc300be77fed7b88aaf4/960x0.jpg?fit=scale" alt="iphone-mockup"&gt; &lt;/div&gt; &lt;/div&gt; &lt;/section&gt; &lt;/body&gt;</pre></div></div><p></p></div> 如何在twitter bootstrap中跨整個html頁面進行網格拉伸 如何使導航欄橫跨頁面（HTML） 如何使橫幅圖像在大屏幕上橫跨頁面延伸？ 如何使頁面頂部的欄在 html 中消失 如何使div在HTML頁面上移動而不進入下一個級別
相關標簽
 
粵ICP備18138465號  © 2020-2024 STACKOOM.COM