自动缩放图像以适应设备高度的其余部分
[英]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.