CODEWITHSUNDEEP
javascripthtmlcss
user2924127
user2924127

Reputation: 6252

Auto scale image to fit the rest of device height

First here is an image of what I looking for:

enter image description here

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

Upvotes: 2

Views: 506

Answers (2)

Stickers
Stickers

Reputation: 78696

Try the approach with flexbox + position tricks.

jsFiddle

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

jsFiddle

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

Upvotes: 3

CodeWeis
CodeWeis

Reputation: 856

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>

Upvotes: 0

Related Questions