自动缩放图像以适应设备高度的其余部分

Question

First here is an image of what I looking for:首先这是我要找的图片：

I want to put a header at the top, a paragraph below the header, and an SVG image below the paragraph.我想在顶部放置一个标题，在标题下方放置一个段落，并在该段落下方放置一个 SVG 图像。 I would like this to scale properly on any sized device (well 320x480 is the smallest I am going to go which is an iPhone4 sized device).我希望它可以在任何尺寸的设备上正确缩放（320x480 是我要使用的最小设备，它是 iPhone4 尺寸的设备）。

I have the following code:我有以下代码：

<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>

The problem is on a small device there are scrollbars and you need to scroll down to view the rest of the image.问题是在小型设备上有滚动条，您需要向下滚动才能查看图像的其余部分。 I would like it to scale properly so that it fits perfectly into the screen so no scrolling is needed.我希望它能够正确缩放，以便它完全适合屏幕，因此不需要滚动。

EDIT: I am using a framework and as a result of the framework I cannot edit the HTML or BODY tags编辑：我正在使用框架，由于框架的原因，我无法编辑 HTML 或 BODY 标签

Answer 1

Try the approach with flexbox + position tricks.尝试使用 flexbox + position 技巧的方法。

jsFiddle js小提琴

 .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>

Or, use flexbox + background image with size contain.或者，使用大小包含的 flexbox + 背景图像。

jsFiddle js小提琴

 .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>

Answer 2

i just gaved the body an min-height and min-width like that it never becommes more small than the phone我只是给了身体一个最小高度和最小宽度，它永远不会比手机更小

 .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>

Answer 3

Give your <img> , header <div> , and paragraph <div> tag a class all of the same name and use JavaScript like this.为您的<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>

自动缩放图像以适应设备高度的其余部分

问题描述

3 个解决方案

解决方案1
3 已采纳 2016-04-02 21:28:03

解决方案2
0 2016-04-02 21:30:15

解决方案3
-1 2016-04-02 21:19:56

自动缩放图像以适应设备高度的其余部分

问题描述

3 个解决方案

解决方案1 3 已采纳 2016-04-02 21:28:03

解决方案2 0 2016-04-02 21:30:15

解决方案3 -1 2016-04-02 21:19:56

解决方案1
3 已采纳 2016-04-02 21:28:03

解决方案2
0 2016-04-02 21:30:15

解决方案3
-1 2016-04-02 21:19:56