html - 停止使用最大宽度 : 100% 调整图像大小

Question

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

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

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

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 先生所指出的...我的图像很好，实际上是表格由于添加了 20 像素的边距而长满了 div。我删除了边距并将 max-width:100% 添加到我的表中。现在一切正常。