Question

我目前仍然遇到这个问题。我正在通过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强制调整图片大小。

Answer 1

试试这个：

.img_contener { 
   //your css ...

   overflow:hidden;
}


img {

   //your css ...

   display : block;
   margin : 0 auto;
}

Answer 2

如果你想让你的图像在主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/

Answer 3

这在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/

Answer 4

保证金：仅当您还将display：block应用于图像时，auto才会起作用。

如何调整水平图像（通过CSS）以适应盒子？

4 个答案: