自動縮放圖像以適應設備的高度

首先這裏的其餘部分是什麼，我要找的是圖片：自動縮放圖像以適應設備的高度

我想提出一個頭頂部，頭下面一個段落，和段落下方的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

自動縮放圖像以適應設備的高度

回答

相關問題