如何水平圖像調整大小（通過CSS）以適應盒子？

我目前被這個問題困住了。我正在通過CSS調整圖片大小，強制高度。如何水平圖像調整大小（通過CSS）以適應盒子？

.img_contener { 
width: 100%; 
height: 400px; 
}

沒有爲圖像大小調整的CSS：

img { 
max-width: 100%; 
max-height : auto; 
height: auto; 
width: auto; 
box-sizing: border-box; 
}

現在我想中心產生的畫面，這取決於它的高度，並不適合容納箱，以及默認情況下停留在左側。

margin：auto和text-align：center都不起作用。

我沒有嘗試jQuery解決方案到目前爲止...我寧願喜歡基於CSS的解決方案。我的選擇是用php強制調整圖片的大小。

來源

2013-02-22 Joel.O

是'.img_contener'上的'text-align：center'嗎？ – Pete 2013-02-22 14:06:29

你想調整圖片的大小來適應你的容器，或者你想將它放在容器中嗎？ – freshbm 2013-02-22 14:33:40

這在CSS中完全可行。請參閱下面的示例，還應該爲容器對象添加overflow：hidden。

HTML

<div id="container"> 

    <img src="http://userserve-ak.last.fm/serve/252/15767501.jpg" class="inner"/> 

</div>

CSS

#container { 
    height: 100px; 
    width: 100px; 
    border: 1px solid black; 
    overflow: hidden; 

} 

.inner { 
    height: 100px; 
    width: auto; 
}

工作小提琴 - http://jsfiddle.net/TXvuQ/

來源

2013-02-22 14:08:17 Swordfish0321

保證金：塊圖像：如果你也適用顯示自動纔會工作。

來源

2013-02-22 14:09:36 Maloric

試試這個：

.img_contener { 
    //your css ... 

    overflow:hidden; 
} 


img { 

    //your css ... 

    display : block; 
    margin : 0 auto; 
}

來源

2013-02-22 14:25:56 freshbm

http://jsfiddle.net/TXvuQ/2/ – TNK 2013-02-22 14:34:55

如果你想保持你的形象在主要DIV居中，你需要使用一個額外的標籤的img

像這樣的事情

<div id="container"> 

    <p><img src="http://userserve-ak.last.fm/serve/252/15767501.jpg" class="inner"/></p> 

</div>

而你的CSS

#container { 
    height: 100px; 
    width: 200px; 
    border: 1px solid black; 
    overflow: hidden; 

} 

.inner { 
    height: 120px; 
    width: auto; 
} 

p { 
    text-align: center; 

}

工作提琴：http://jsfiddle.net/TXvuQ/1/

來源

2013-02-22 14:28:28 TNK

這是沒有必要有額外的標籤中心圖像內部div – freshbm 2013-02-22 14:54:24

如何水平圖像調整大小（通過CSS）以適應盒子？

回答

相關問題