1

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

4

4 回答 4

1

尝试这个：

.img_contener { 
   //your css ...

   overflow:hidden;
}


img {

   //your css ...

   display : block;
   margin : 0 auto;
}
于 2013-02-22T14:25:56.733 回答
1

如果你想让你的图像在主 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-22T14:28:28.630 回答
0

这在 CSS 中是完全可行的。请参阅下面的示例，您还应该在容器对象中添加溢出：隐藏。

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-22T14:08:17.663 回答
0

Margin:auto 仅在您也将 display:block 应用于图像时才有效。

于 2013-02-22T14:09:36.043 回答