停止使用 max-width: 100% 调整图像大小

Question

我正在为我的网站使用三列骨架布局。除了一件事之外，一切都按照我想要的方式工作。我有一张图像对齐并位于 table 上方。见下文：

http://www.cosworth-europe.co.uk/catalogue/pistonringsets.html

如果我将 max-width:100%; 添加到图像中，它会稍微缩小并移动到与我的 table 不一致的位置，甚至在我通过浏览器调整大小之前。看这里：

http://www.cosworth-europe.co.uk/catalogue/pistonringsets2.html

有什么方法可以保留 max-width，但在屏幕尺寸改变之前它根本不会调整大小？

HTML

<div class="six columns">
    <img src="../images/catalogue/pistonringslarge.jpg">
    <p style="padding-top:10px;"></p>

    <table style="font-size:11px; width:380px; margin-left:20px;">
        <tbody>
            <tr>
                <td style="padding-right:5px; width:70px;">Product Code</td>
                <td style="background-color:#133D8D; color:white; padding-left:5px;">Description</td>
            </tr>

CSS

.container .six.columns {
    width: 340px;
}

Answer 1

正如 Listed 先生所指出的...我的图像很好，实际上是 table 由于添加了 20 像素的边距而长满了 div。我删除了边距并将 max-width:100% 添加到我的 table。现在一切正常。