自動縮放圖像以適應設備高度的其余部分
[英]Auto scale image to fit the rest of device height
問題描述
首先這是我要找的圖片：
我想在頂部放置一個標題，在標題下方放置一個段落，並在該段落下方放置一個 SVG 圖像。 我希望它可以在任何尺寸的設備上正確縮放（320x480 是我要使用的最小設備，它是 iPhone4 尺寸的設備）。
我有以下代碼：
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=no">
</head>
<body>
<div style="height:100%;position:absolute;top:0;left:0;bottom:0;right:0;">
<div>
<h2>Title</h2>
<p>Some long paragraph will be inserted here</p>
</div>
<div>
<img src="mySvg.svg" /> <!-- This image should scale to fit the remaining of the screen size. -->
</div>
</div>
</body>
</html>
問題是在小型設備上有滾動條，您需要向下滾動才能查看圖像的其余部分。 我希望它能夠正確縮放，以便它完全適合屏幕，因此不需要滾動。
編輯：我正在使用框架，由於框架的原因，我無法編輯 HTML 或 BODY 標簽
3 個解決方案
解決方案1
3 已采納 2016-04-02 21:28:03
嘗試使用 flexbox + position 技巧的方法。
.container { height: 100%; position: absolute; top: 0; left: 0; bottom: 0; right: 0; display: flex; flex-direction: column; } .container div:last-child { flex: 1; position: relative; } .container div:last-child img { position: absolute; max-width: 100%; max-height: 100%; }
<div class="container"> <div> <h2>Title</h2> <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p> </div> <div> <img src="https://dev.w3.org/SVG/tools/svgweb/samples/svg-files/w3c.svg" /> </div> </div>
或者，使用大小包含的 flexbox + 背景圖像。
.container { height: 100%; position: absolute; top: 0; left: 0; bottom: 0; right: 0; display: flex; flex-direction: column; } .container div:last-child { flex: 1; background: url("https://dev.w3.org/SVG/tools/svgweb/samples/svg-files/w3c.svg") 0 0 no-repeat; background-size: contain; }
<div class="container"> <div> <h2>Title</h2> <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p> </div> <div></div> </div>
解決方案2
0 2016-04-02 21:30:15
我只是給了身體一個最小高度和最小寬度，它永遠不會比手機更小
.test{ min-height:480px; min-width: 320px; background-color: pink; text-align:center; display: flex; flex-direction:column; justify-content: flex-start; align-items: center; padding: 0px 10px; } body{ margin:0px; }
<body> <div class="test" style="height:100%;position:relative;top:0;left:0;bottom:0;right:0;"> <div class="para"> <h2>Title</h2> <p>Some long paragraph will be inserted hereSome long paragraph will be inserted hereSome long paragraph will be inserted hereSome long paragraph will be inserted hereSome long paragraph will be inserted hereSome long paragraph will be inserted hereSome long paragraph will be inserted hereSome long paragraph will be inserted hereSome long paragraph will be inserted hereSome long paragraph will be inserted hereSome long paragraph will be inserted hereSome long paragraph will be inserted hereSome long paragraph will be inserted hereSome long paragraph will be inserted hereSome long paragraph will be inserted here</p> </div> <div class="test"> <img src="http://lorempixel.com/71/95" /> <!-- This image should scale to fit the remaining of the screen size. --> </div> </div> </body>解決方案3
-1 2016-04-02 21:19:56
為您的<img> 、標題<div>和段落<div>標記一個class都具有相同的名稱，並像這樣使用 JavaScript。
<HTML> <head> </head> <body> <div class = "screenWidth">Header text</div> <div class = "screenWidth">Paragraph text</div> <img class = "screenWidth" src = "yourSvg.svg"> <script> document.getElementsByClassName("screenWidth")[0].width = screen.width; document.getElementsByClassName("screenWidth")[3].width = screen.width; document.getElementsByClassName("screenWidth")[2].width = screen.width; </script> </body> </HTML>
如何自動縮放mPDF中的SVG對象以適合頁面的其余部分？
聲明:本站的技術帖子網頁，遵循CC BY-SA 4.0協議，如果您需要轉載，請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.