Question

我img中td width，height和100%都设置为width。在Chrome中，height符合，但div { background-color: red; width: 100px; height: 100px; } table { width: 100%; height: 100%; } img { width: 100%; height: 100%; }不符合。它似乎在所有其他浏览器中按预期工作。

不确定原因？

＆＃13;

<div>
    <table border="1">
        <tr>
            <td>
                <img src="https://www.google.com/images/srpr/logo11w.png" />
            </td>
        </tr>
    </table>
</div>

＆＃13;

.on()

＆＃13;

Answer 1

您应该设置 max-height 或 max-width ，以避免内部元素延伸到outter元素之外。

HTML

<div>
    <img src="https://www.google.com/images/srpr/logo11w.png" />
</div>

CSS

div
{
    background-color: red;
    max-width: 100px;
    width: 100px;
    max-height: 100px;
    height: 100px;
}

请记住删除表格中的所有边距和填充。

Answer 2

问题在于表格。图像将其高度设置为其容器的100％，问题是td从图像原始高度（190px）获得高度。我的建议是将所有表格放在一起，只需将图像放入div中即可完美运行。否则，您需要将td高度设置为100px。

或许这看起来足够接近你想要的东西：http://jsfiddle.net/ericjbasti/kv4zpkuu/6/

div{
    width: 100px;
    height: 100px;
    background: red;
}

div img{
    width: 100%;
    height: 100%;
    vertical-align:top;
    border: 4px ridge;
    box-sizing: border-box;
}

Answer 3

为了将来的参考，我能够通过将img包裹在div中来实现它。

div.one
{
    background-color: red;
    width: 100px;
    height: 100px;
}

table
{
    width: 100%;
    height: 100%;
}

img
{
    width: 100%;
    height: 100%;
}

<div class="one">
    <table border="1">
        <tr>
            <td>
                <div>
                    <img src="https://www.google.com/images/srpr/logo11w.png" />
                </div>
            </td>
        </tr>
    </table>
</div>

图像％高度尺寸未在铬

3 个答案: