Question

我需要调整图像大小以适应div内部。无论如何，这个div必须是position: absolute; div。除了图像的最大尺寸100％，它应该以另一种方式居中。

我可以调整大小以适应它，但不能居中。我尝试将其内联并使用vertical-align，但它不起作用。

由于代码的价值超过了单词，请查看我的fiddle example。

这是来自jsfiddle的代码：

CSS：

.relative {
    width: 400px;
    height: 400px;
    position: relative;

    <!-- Next is not important, only to display better -->
    display: block;
    background-color: green;
    border: 3px solid yellow;
    margin-bottom: 10px;
}

.absolute {
    position: absolute;
    top: 20px;
    bottom: 20px;
    left: 20px;
    right: 20px;
    background-color: red;
}


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

HTML：

<div class="relative">
    <div class="absolute">
        <img src="http://upload.wikimedia.org/wikipedia/commons/1/15/Cat_August_2010-4.jpg"/>
    </div>
</div>

<div class="relative">
    <div class="absolute">
        <img src="http://us.123rf.com/400wm/400/400/pashok/pashok1101/pashok110100126/8578310-vertical-shot-of-cute-red-cat.jpg"/>
    </div>
</div>

Answer 1

仅适用于半新浏览器：

img {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
}

绝对定位所有的东西！

transform仍然需要我听到的浏览器前缀。 -webkit-适合我。

http://jsfiddle.net/rudiedirkx/G9Z7U/1/

Answer 2

您可以将图片放到背景而不是img标签。

<div class="absolute">
    <img src="//upload.wikimedia.org/wikipedia/commons/5/52/Spacer.gif">
</div>

.absolute {
    background-image: url(http://upload.wikimedia.org/wikipedia/commons/1/15/Cat_August_2010-4.jpg);
    background-repeat: no-repeat;
    background-position: center;
    background-size: contain;
}

但是，如果您可以为div设置固定高度，则可以使用：

.absolute { line-height:360px; }
.absolute img { vertical-align:middle; }

Answer 3

也许我不明白这个问题......

.absolute {
    position: absolute;
    top: 20px;
    bottom: 20px;
    left: 20px;
    right: 20px;
    background-color: red;
    line-height:350px; //new
}
img {
    position:relative;
    display:inline-block; // new
    vertical-align:middle; // new
    max-width: 100%;
    max-height: 100%;
    width: auto;
    height: auto;
}

如何在绝对div位置调整大小以适应和居中图像？

3 个答案: