垂直響應設計：按比例縮放圖像

我發現這個非常有用的網站Vertically Responsive Design : Keeping Things Above The Fold，其中顯示瞭如何在調整瀏覽器窗口高度（而不是寬度）時創建用於縮放其中的文本的div。垂直響應設計：按比例縮放圖像

我在尋找的是做完全相同的事情，但與圖像。換句話說，當調整瀏覽器窗口高度並保持其比例時，可以縮放圖像。

任何人有任何建議嗎？

謝謝！

更新：小提琴這裏：https://jsfiddle.net/1pu67mLg/

這是文本的HTML（從nitinh.com）：

<div class="container"> 
     <div class="hero-unit"> 
      <div class="text"> 
       <h1>lorem ipsum dolor sit amet</h1> 
       <p> 
        Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vivamus quis euismod felis. Phasellus id pretium dui proin finibus. 
       </p> 
       <p> 
        Lorem ipsum dolor sit amet <a href="#">article</a>. 
       </p> 
      </div> 
     </div> 
</div>

而CSS（從nitinh.com）：

.container{ 
    min-width:600px; 
    max-width:1080px; 
    min-height:100%; 
    width:150vh; 
    margin:0 auto; 
    font-family:'Lato',sans-serif 
} 

.hero-unit{ 
    min-width:600px; 
    max-width:1080px; 
    min-height:calc(690px * (90/150)); 
    height:90vh; 
    width:150vh; 
    background-color:#2fa1b2; 
    position:relative; 
    box-sizing:border-box; 
    padding:10px 30px 
} 

.hero-unit h1{ 
    font-weight:400px; 
    font-size:7vh 
} 

.hero-unit .text{ 
    font-weight:100; 
    font-size:4vh; 
    color:#fff 
}

來源

2017-02-28 GetGalax

你的小提琴沒有圖像嗎？ –

不，因爲我不知道如何在容器中添加一個線索，並具有文本現在具有的縮放效果？ – GetGalax

如果我正確理解你的問題，你想添加一個圖像，根據視口的高度進行縮放。如果是的話你只是想類似的縮放圖像以文本只需添加一個正常的IMG標籤和使用vh單位，像這樣：

HTML

<img src="http://placehold.it/350x150" alt="">

CSS

.hero-unit img{ 
    height: 40vh; 
    width: auto; 
}

jsfiddle

來源

2017-02-28 15:33:25

安德魯，你的男人！非常感謝你的支持。你看起來很容易;） – GetGalax

垂直響應設計：按比例縮放圖像

回答

相關問題