根據屏幕大小自動調整圖像大小（html和css）
[英]Auto resize image depending on screen size (html and css)
問題描述
我有一個用 html 和 css 編寫的 web 頁面。 假設我的 html 僅由一些簡單的組成，例如：
<.doctype html> <head> <title>testpage</title> <link rel = "stylesheet" href="style.css"> </head> <body> <div id="header"> header </div> <div id="central_body"> <div class="image_area"> <img id = "image_to_resize" src= "images/image_to_resize.jpg" alt = ""> </div> <div class = "nav"> nav </div> </div> <div id="page_footer"> footer </div> </body>
如您所見，有一個包含圖像的 div。 圖像可以比屏幕大。 我想讓所有內容都適合屏幕大小，以使滾動條不出現； 擬合內容時，我想重新縮放圖像但保持其原始縱橫比。 我想將 img 標簽保留在 html 代碼中。 我該怎么辦？ 我可以使用 html、css 和 javascript。
3 個解決方案
解決方案1
0 2022-08-04 15:05:39
您可以使用此 css 屬性：
.image_area img{
max-width: 100%;
max-height: 100%;
display: block; /* remove extra space below image */
}
解決方案2
0 2022-08-04 15:21:28
您應該設置視口來控制頁面尺寸和縮放。
<meta name="viewport" content="width=device-width, initial-scale=1.0">
並為您的 div 和圖像寬度使用% 。 設置 width:100% 而不是px
如果您希望圖像容器占據整個視口，請設置 div central_body height: 100vh;
解決方案3
0 2022-08-04 17:50:35
絕對您的解決方案是視口。 如何使用它的一般約定是，如上所列：
<meta name="viewport" content="width=device-width, initial-scale=1.0">
CSS，高度為：自動的圖片，在屏幕調整大小時覆蓋其下方的div（水平握住手機）
[英]CSS, image with height:auto, covers div beneath it upon screen resize (phone held horizontally)
如何根據屏幕尺寸啟動功能並在調整尺寸后停止其他功能？
[英]How to launch functions depending on screen size and stop others after resize?
聲明:本站的技術帖子網頁，遵循CC BY-SA 4.0協議，如果您需要轉載，請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.