響應式圖像保持寬高比，始終處於中心位置

我想使用css使圖像保持寬高比（16：9）並且同時響應。響應式圖像保持寬高比，始終處於中心位置

此圖像將始終位於屏幕的中心。檢查模式以幫助您。

我發現this後，我試過克里斯的解決方案和艾薩克的解決方案。但我無法將圖像帶入中心。我嘗試像這樣使用Bootstrap。

<div class="col-md-4">.col-md-4</div> 
<div class="wrapper col-md-4"> 
    <div class="main"> 
    This is your div with the specified aspect ratio. 
    </div> 
</div> 
<div class="col-md-4">.col-md-4</div>

或

<body> 
    <div class="col-md-4" id="wrap1">.col-md-4</div>   
    <div class="col-md-4" id="aspectRatio">Aspect Ratio?</div> 
    <div class="col-md-4" id="wrap2">.col-md-4</div>   
</body>

但所有的div出現在另一個下方。

有關如何通過使用Bootstrap或不使用Bootstrap將div引入中心的任何想法？

感謝

來源

2016-03-21 slevin

我總是把我的IMG在一個div與居中的div：

margin:0 auto;

併爲響應圖像定義寬度，並使高度爲自動。希望它有幫助。

來源

2016-03-21 23:16:36 Ryuk

這將使您的元素居中在頁面上。

.element { 
    position: absolute; 
    top: 50%; 
    left: 50%; 
    transform: translateX(-50%) translateY(-50%); 
}

我相信你會在一個容器，是要爲你問題的第二部分的縱橫比的100％來定義一個最小寬度或最大寬度爲你的形象。另外，如果您需要動態設置縱橫比，那麼總是有JS。 Qjuery有你可以使用的功能，我認爲如果你已經在你的項目中使用它，這將不會很難。

編輯：居中圖像在第二報頭我建議具有諸如結構：

-Second頭

---------包裹

- --------------- image

將圖像作爲100％大小的換行。相對於第二個標題具有相對於它的寬度和高度爲100％的換行。我希望這有助於:)

來源

2016-03-21 23:25:32 Judder

響應式圖像保持寬高比，始終處於中心位置

回答

相關問題