自动缩放图像以适应设备的高度

首先这里的其余部分是什么，我要找的是图片：自动缩放图像以适应设备的高度

我想提出一个头顶部，头下面一个段落，和段落下方的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标签

来源

2016-04-02 user2924127

长宽比无关紧要？ –

嗨，是的，svg图像的宽高比确实很重要。如果图像长于宽度，则高度不应低于屏幕，如果图像宽于长度，则不应在屏幕的左侧和右侧切断。 – user2924127

如果是这样，只是给它'style =“width：100％;”'但高度可能不像你期望的那样 –

尝试用Flexbox的+位置花样的做法。

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>

或者，利用Flexbox的+大小为背景图片包含的内容。

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>

来源

2016-04-02 21:28:03 Stickers

谢谢！它似乎工作，但我问的问题是我的实际生活用例的简化版本。是否有可能做类似的事情，但不要触及html或body标签，因为我实际上是在一个angular2 web框架内编写这个代码，其中只有一个页面有很多视图？所以如果我修改头部或身体标签，它实际上会影响我的所有页面。 – user2924127

[this]怎么样？（https://jsfiddle.net/y1h8q4oq/）？我添加了一个类到div并删除了内联样式。 – Stickers

你是个美丽的人！这工作很棒！非常感谢！ – user2924127

-1

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

来源

2016-04-02 21:19:56

这不起作用。图像变得庞大，几乎所有的图像都被切断。 – user2924127

试着做'screen.width - 150'并且如果它变大的话继续增加数量，如果它变小的话减少它。 –

我只是gaved本体中的最小高度和最小宽度一样，它永远不会becommes比手机

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

更小

来源

2016-04-02 21:30:15 DanyCode

svg缩放到100的宽度，使高度变成滚动条。 – user2924127

自动缩放图像以适应设备的高度

回答

相关问题