调整窗口大小时图像边框右侧未显示

Question

我对编码HTML很陌生，所以我从cerberus复制了一个适合我的工作的移动友好模板。我当前的问题是我在标题图像中添加了边框，但是当窗口调整为小于100％的任何值时，右边框不会显示。我试过去除宽度：100％，这实际上使它变得更糟。我也试过添加填充，但这似乎也没有用。以下是代码，欢迎任何帮助。

<table align="center" aria-hidden="true" border="0" cellpadding="0" cellspacing="0" class="email-container" role="presentation" style="max-width: 680px;" width="100%"><!-- Hero Image, Flush : BEGIN -->
<tbody>
    <tr>
        <td bgcolor="#ffffff"><img align="middle" alt="alt_text" aria-hidden="true" border="0" class="fluid" src="https://......" style="width: 100%; max-width: 660px; border: 10px groove goldenrod; height: auto; background: rgb(221, 221, 221) none repeat scroll 0% 0%; font-family: sans-serif; font-size: 15px; line-height: 20px; color: rgb(85, 85, 85);" width="680" /></td>
    </tr>

Answer 1

解决方案1：使用box-sizing: border-box;，因此您的宽度包含边框作为框：

  

CSS3框大小属性定义和用法

     

box-sizing属性用于告诉浏览器调整属性（宽度和高度）应包含的内容。

     

它们应该包括边框吗？或者只是内容框（宽度和高度属性的默认值）？

     

内容盒：
  默认。 width和height属性（以及min / max属性）仅包含内容。不包括边框，填充或边距

     

<强>边界框：
  宽度和高度属性（以及最小/最大属性）包括内容，填充和边框，但不包括边距

     

<强>初始
  将此属性设置为其默认值。阅读有关初始

的内容      

<强>继承：
  从其父元素继承此属性。阅读有关继承的信息

参考：https://www.w3schools.com/cssref/css3_pr_box-sizing.asp

.fluid {
  width: 100%;
  max-width: 680px;
  border: 10px groove goldenrod;
  height: auto;
  background: rgb(221, 221, 221) none repeat scroll 0% 0%;
  font-family: sans-serif;
  font-size: 15px;
  line-height: 20px;
  color: rgb(85, 85, 85);
  box-sizing: border-box;
}

<table align="center" aria-hidden="true" border="0" cellpadding="0" cellspacing="0" class="email-container" role="presentation" style="max-width: 680px;" width="100%">
  <!-- Hero Image, Flush : BEGIN -->
  <tbody>
    <tr>
      <td bgcolor="#ffffff"><img align="middle" alt="alt_text" aria-hidden="true" border="0" class="fluid" src="http://placehold.it/350x150" width="680" /></td>
    </tr>
  </tbody>
</table>

解决方案2：在.fluid中使用以下内容，因为宽度不包括边框宽度：

width: calc(100% - 20px);

.fluid {
  width: calc(100% - 20px);
  border: 10px groove goldenrod;
  height: auto;
  background: rgb(221, 221, 221) none repeat scroll 0% 0%;
  font-family: sans-serif;
  font-size: 15px;
  line-height: 20px;
  color: rgb(85, 85, 85);
}

<table align="center" aria-hidden="true" border="0" cellpadding="0" cellspacing="0" class="email-container" role="presentation" style="max-width: 680px;" width="100%">
  <!-- Hero Image, Flush : BEGIN -->
  <tbody>
    <tr>
      <td bgcolor="#ffffff"><img align="middle" alt="alt_text" aria-hidden="true" border="0" class="fluid" src="http://placehold.it/350x150" width="680" /></td>
    </tr>
  </tbody>
</table>