bootstrap中心圖像風景iphone

-1

使用boostrap 3和在首頁我有一個圖像。它的中心很好，但在風景中使用iphone或平板電腦時，圖像太大。你能告訴我如何使它響應景觀以及bootstrap中心圖像風景iphone

2014-07-25 Webjuice

由於您的問題是關於Twitter Bootstrap框架，您可能需要爲您的問題添加[twitter-bootstrap]（https://stackoverflow.com/questions/tagged/twitter-bootstrap）標籤？ –

告訴我們你的代碼！ –

試試這個：

<img src="..." class="img-responsive">

來源

2014-07-25 14:00:52

那是allredy那裏。不爲景觀工作 – Webjuice

嘗試增加max-height:100vh到圖像的CSS。很難知道肯定沒有看到您的代碼，但應該工作...

來源

2014-07-26 03:46:31

謝謝！那工作！我從來沒有聽說過「vh」 – Webjuice

直到幾個星期前，我還沒有聽說過。注意，它不適用於

img響應類應用100％的最大寬度。因此，在容器填充視口的較小設備上的橫向模式下，如果圖像是設備的寬度，則圖像將在頂部和底部切掉。此外，您的身體上還設置了55像素的頂部邊距，這進一步降低了橫向設備上的可觀看高度。

使用媒體查詢以橫向模式定位設備以移除邊距並更改img-responsive類以調整圖像以獲取最大高度而不是最大寬度應解決該問題。

@media screen and (max-device-width: 1000px) and (orientation:landscape){ 
    body { 
    margin-top: 0px; 
    } 
    .img-responsive { 
    max-width: initial; 
    max-height: 100vh; 
    } 
}

如果你真的想簡化您的着陸頁到本質，並把它垂直和水平居中圖像的所有視口，你可以刪除所有不必要的div，只是做這樣的事情：

<!DOCTYPE html> 
<html lang="en"> 
<head> 
<meta name="viewport" content="width=device-width, initial-scale=1"> 
<!-- Core CSS --> 
<link rel="stylesheet" type="text/css" href="//maxcdn.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap.min.css"> 
<style> 
img { 
    max-height: 100%; 
    max-width: 100%; 
    position: absolute; 
    top: 0; 
    bottom: 0; 
    left: 0; 
    right: 0; 
    margin: auto; 
} 
</style> 
</head> 
<body> 
    <a href="http://garveydoyle.ie/sitenew/about-us/"> 
     <img class="loading" src="http://garveydoyle.ie/sitenew/wp-content/themes/roots/assets/img/loading.jpg" alt="garvey doyle" /> 
    </a> 
</body> 
</html>

來源

2014-07-26 11:14:58 jme11

bootstrap中心圖像風景iphone

回答

相關問題