Question

我试图在保持纵横比的同时将图像居中在div中 - 我使用此代码，但不知何故它没有对齐中心的项目（顶部/底部中心）。如果可能，仅使用CSS。

自使用最大宽度以来，图像的大小是未知的！

JSfiddle：http://jsfiddle.net/L41wpza6/2/

#imageHolder {
width: 400px;
height: 400px;
line-height: 400px;
background-color:#CCCCCC;
}

#imageHolder img {
 max-width: 100%;
  max-height:100%;
  display: block;
  margin: 0 auto;
  vertical-align: middle;

}

任何帮助表示赞赏！我不确定我缺少什么才能使这项工作。

Answer 1

JSFiddle - DEMO

您应该使用display: inline-block;与#imageHolder img进行垂直对齐。

CSS显示内联块属性允许元素像内联元素一样流动，但是尊重属性，例如宽度，就像块元素一样，你可以使用显示内联块来设置垂直对齐中间。

<强> HTML：

<div id="imageHolder">
    <img src="http://www.discoverjb.com/wp-content/uploads/2014/07/IMG_1399.jpg">
</div>

<强> CSS：

#imageHolder {
    width: 400px;
    height: 400px;
    line-height: 400px;
    background-color:#CCCCCC;
}
#imageHolder img {
    max-width: 100%;
    max-height:100%;
    display: inline-block; /* Instead of display: block; */
    margin: 0 auto;
    vertical-align: middle;
}

Answer 2

寻找水平中心。

@sibbl的解决方案有效，但在水平情况下图像顶部仍有一些像素。

我已经删除了@Anoymous代码

HTML：

<div class="imageHolder">
    <img src="http://lorempixel.com/g/800/400">
</div>
<div class="imageHolder">
    <img src="http://lorempixel.com/g/800/800">
</div>
<div class="imageHolder">
   <img src="http://lorempixel.com/g/400/800">
</div>

CSS：

.imageHolder {
    width: 300px;
    height: 300px;
    background-color:#CCCCCC;
    margin:10px;
    display:inline-block;
    float:left;
    position:relative;
}
.imageHolder img {
    max-width: 100%;
    max-height:100%;
    margin: auto;
    position:absolute;
    top:0;
    left:0;
    right:0;
    bottom:0;
}

JSFiddle - DEMO

Div中的自动居中和保持图像纵横比

2 个答案: