img alt 改变图像尺寸答案

【问题标题】：img alt changing image dimensionsimg alt 改变图像尺寸
【发布时间】：2014-02-13 03:03:16
【问题描述】：

由于某种原因，当我为网站上的某些图片添加 alt 标签时，它们的尺寸发生了变化。

www.dweeman.com/eb/sitetemplate.html 有 alt 标签

<table id="sidebar">
  <tr id="sidebar">
   <td><img src="images/photos/venetian_sample.gif" alt="venetian blind icon"></td>
   <td id="sidebar"><a href="blinds.html#venetian">Venetian Blinds</a></td>
  </tr>
</table>

www.dweeman.com/eb/index.html没有alt标签

<table id="sidebar">
  <tr id="sidebar">
   <td><img src="images/photos/venetian_sample.gif"></td>
   <td id="sidebar"><a href="blinds.html#venetian">Venetian Blinds</a></td>
  </tr>
</table>

它们都使用相同的样式表，并且在该 div 中具有完全相同的 HTML。

有人知道为什么会这样吗？我知道图像没有加载。它们还没有被制造出来。但我想解决这个问题，以防它们将来不加载，这样它最终不会让我的身体消失。

【问题讨论】：

所有图片都是404的？
如果您指的是图像现在的大小，它可能与替代文本的长度有关。您可以使用 CSS 设置大小以确保它们都是统一的。
是的，我还没有创建图像，但它们将是 50*50px。
问题应包含重现问题所需的代码。链接到实时页面是不够的。哦，没有“alt标签”。
抱歉，我在此站点上格式化代码时遇到问题。插入它似乎永远不会起作用，并且有很多东西可以证明这个问题。我修改了问题标题

标签： css html alt

【解决方案1】：

您遇到此“问题”的原因是您的图像尚不存在，因此无法找到它们。 alt 标签旨在在无法找到图像时显示文本，而这正是正在发生的事情。当你开始上传你的图片时，它们将是它们应该是的确切大小（如 CSS 或 HTML 中指定的那样）。简而言之，除非浏览器无法显示/找到所述图像，否则 alt 标签不会影响图像的尺寸。

请参阅下面的链接。我编辑了您的 HTML 以包含浏览器可以找到的图片。如您所见，我很长的alt 标签（这是一个完整的段落）不会影响狗的图像。

http://jsfiddle.net/RWLFG/4/

另外，这是另一个非常清楚地展示了我上面解释的例子：

http://jsfiddle.net/P4X58/2/

（请注意，由于呈现错误，alt 文本将不会显示在 Chrome 中。）

更新： 好的，您似乎指的是您在<p> 标签之间输入的文本不可见。要解决此问题，请从 CSS 中的 #container 中删除 float:left。请看下面的例子。（顺便说一句，段落文本隐藏在您提供的两个链接中，不确定为什么您认为alt 标签与问题有关，但我离题了）。另外，您的代码中存在很多错误，我强烈建议您使用官方W3C validator 进行验证。

http://jsfiddle.net/RWLFG/7/

【讨论】：

我明白这一点。我还没有创建图像。但是我插入了alt，看看它们暂时会如何显示。因此，如果可以找到图像，它就可以工作。但如果他们不能，身体就会消失。我想解决这个问题，而不是仅仅提供未来可能会出现问题的功能图像。
@dweeman 如果您在 HTML 或 CSS 中指定尺寸，即使找不到图像，绑定框也将保持正确的尺寸。请参阅此exampe:。你能澄清一下“身体消失”是什么意思吗？我不确定你想要做什么......
@Dweeman，这是在您的网站click here 上指定图像尺寸的示例。
您好，谢谢您回复我。现在已经解决了。如果您查看上面链接的我的网站，您可以看到这一点。我所说的让主体消失的意思是，当它达到最小宽度时，它不会调整大小，而是开始向外移动，使网站可以横向滚动。如果您查看我的网站，它会以某些宽度出现在我的侧边栏上。我试图在某个点停止调整大小，然后容器右侧的填充开始向右移出视野。

【解决方案2】：

当找不到图像时，浏览器会专门显示alt 文本，这显然是该属性的重点。

您可以内联或通过 css 指定宽度/高度，它应该在这些尺寸处剪切文本。无论如何，这对于图像来说都是一种很好的做法，因此浏览器仍然知道它应该使用什么尺寸

【讨论】：

我已经完成了 alt {width: 10px; height: 10px;} 在 css 中，但它似乎不起作用。这不正确吗？
这是一个很好的答案，但我觉得有必要扩展和澄清一些事情。无论如何，+1 @helion3！