如何水平图像调整大小（通过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）以适应盒子？

回答

相关问题