调整 window 大小时图像右侧不显示

Question

我对编码有点陌生 html 所以我从 cerberus 复制了一个适用于移动设备的模板用于我的工作。我当前的问题是我已经为页眉图像添加了边框，但是当 window 的大小调整为小于 100% 时，右边框不显示。我试过删除 width: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 Property Definition and Usage

The box-sizing property is used to tell the browser what the sizing properties (width and height) should include.

Should they include the border-box? Or just the content-box (which is the default value of the width and height properties)?

content-box:
Default. The width and height properties (and min/max properties) includes only the content. Border, padding, or margin are not included

border-box:
The width and height properties (and min/max properties) includes content, padding and border, but not the margin

initial:
Sets this property to its default value. Read about initial

inherit:
Inherits this property from its parent element. Read about inherit

参考：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>

调整 window 大小时图像右侧不显示

Image Border right side not showing when window is resized

html

border

window-resize

解决方案 1：使用 `box-sizing: border-box;` 使您的宽度包括作为框的边框：

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

调整 window 大小时图像右侧不显示

Image Border right side not showing when window is resized

html

border

window-resize

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

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

解决方案 1：使用 `box-sizing: border-box;` 使您的宽度包括作为框的边框：

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