Auto scale image to fit the rest of device height
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. 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).
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
3 answers
solution1
3 ACCPTED 2016-04-02 21:28:03
Try the approach with flexbox + position tricks.
.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.
.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>
solution2
0 2016-04-02 21:30:15
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>solution3
-1 2016-04-02 21:19:56
Give your <img> , header <div> , and paragraph <div> tag a class all of the same name and use JavaScript like this.
<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>
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.