以固定高度爲中心響應圖像

-1

我正在構建一個響應網站，並且我有一個圖像，我希望具有一個固定的高度，但隨着容器寬度減小，窗口崩潰時圖像保持居中。我已經嘗試了幾件事情，並且我已將高度固定，但是在視圖寬度小於100％的情況下，圖像不會集中。以固定高度爲中心響應圖像

任何幫助，非常感謝。

感謝

.container { 
 
    
 
    overflow: hidden; 
 
} 
 
.container img { 
 
    width: auto; 
 
    height: 550px; 
 
}

<div class="container"> 
 
    <img src="http://placehold.it/500x550" alt="alt" /> 
 
</div>

來源

2015-11-06 Mark Taylor

是正確的，你的答覆不能 –

在這裏看到你的高度是固定的，但也反應迅速。我只是舉一個例子圖片。添加這個類到你的形象class="img-responsive"

.container { 
 
    overflow: hidden; 
 
} 
 
.container img { 
 
    height: 550px; 
 
}

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css"> 
 
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap-theme.min.css"> 
 
    <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js"></script> 
 

 
<div class="container"> 
 
    <img src="http://media1.santabanta.com/full1/Miscellaneous/Cartoon%20Characters/cartoon-characters-14a.jpg" alt="alt" class="img-responsive" > 
 
</div>

來源

2015-11-07 03:28:29

謝謝，但不幸的是這並沒有給所要求的效果，由於寬度減小時，圖像壓扁。我所追求的是隨着寬度的減少圖像保持100％的寬度，但水平居中到容器 –

什麼是您的所需效果，請清除我...我會盡力幫助你。 –

謝謝，對於圖像保持相同的大小，但隨着容器寬度減少，圖像保持居中。我確實有一張上面張貼的圖片 –

以固定高度爲中心響應圖像

回答

相關問題