Question

我们有#inner padding-top和padding-bottom。 div内的内容居中。我们有max-width:100%和max-height:100%的图片。

图像是响应式的，但它通过填充获得#inner的高度，并且它不居中。

CSS

*, *:before, *:after {
  -moz-box-sizing: border-box;
  -webkit-box-sizing: border-box;
  box-sizing: border-box;
}

#inner {
    height:100px;
    padding:15px 0;
    background:yellow;
}

#container {
    height: inherit;
}

a {
    float: left;
    height: inherit;
    width: auto;
}

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

HTML：

<div id="inner">
    <div id="container">
        <a href=""><img src="http://lorempixel.com/400/200/"></a>
    </div>
</div>

我尝试在<a>标记中添加填充，在<a>周围添加其他容器，但图像变小了。图像应该是#inner - 30px（填充）的高度。

我理解问题出在inherit属性上，但我不知道解决方案。

以下是jsfiddle链接：http://jsfiddle.net/b8o2t31e/

Answer 1

请尝试以下操作： Demo

<强> CSS：

#container {
    height: 100%;
}
a {
    float:left;
    height: inherit;
    width: auto;
    background:red;
}
img {
    max-height:100%;
    max-width:100%;
    display:block;
    margin:0 auto;
}

修改或者如果您想将图片放在div的中心，可以像这样使用 Demo

CSS：

#container {
    height: 100%;
    background:red;
    display:block;
    margin:0 auto;
    text-align:center;
}
a {
    max-height:100%;
    width: auto;
}
img {
    max-height:100%;
    max-width:100%;
}

修改：要删除<img>这样的额外空间使用宽度和高度100％： Demo

CSS：

#container {
    height: 100%;  }
a {
    height: inherit;
    background:red;
    margin:0;
    padding:0;
    display:inline-block;
}
img {
    height:100%;
    width:100%;
}

Answer 2

尝试将#container的高度从inherit更改为100%。

＆＃13;

*, *:before, *:after {
  -moz-box-sizing: border-box;
  -webkit-box-sizing: border-box;
  box-sizing: border-box;
}

#inner {
    height:100px;
    padding:15px 0;
    background:yellow;
}

#container {
    height: 100%;
}

a {
    float: left;
    height: inherit;
    width: auto;
}

img {
    max-height:100%;
    max-width:100%;
}

＆＃13;

<div id="inner">
    <div id="container">
        <a href=""><img src="http://lorempixel.com/400/200/"></a>
    </div>
</div>

＆＃13;

在div内的响应图像与填充

2 个答案: