<img>表演奇怪

我已经做了一个小画廊（http://www.kongeboa.dk/billeder/3/Coco/）如果刷新，并选择查看实际图像下方的其他缩略图之一，您将看到图像随机调整大小... 我有一个图像标签上的宽度设置为100％我相信，所有图像的大小均为460px，以填充设计的宽度。当查看所有缩略图时，大图显示的尺寸正确（460px）<img>表演奇怪

问题发生在Safari和Chrome中。 OSX和Windows。

我不知道为什么会这样，我不知道如何调试它...

来源

2011-05-24 mnstrflkrn

在这里看不到任何奇怪的行为。一切都有正确的大小和缩略图也完美地工作。当出现这个错误时，你使用什么浏览器/操作系统？ – 2011-05-24 11:28:46

我刚刚编辑我的帖子，让你知道，这是铬和Safari浏览器（mac osx和windows） – mnstrflkrn 2011-05-24 11:29:49

我太过于害怕蛇;我不会解决这个问题:-p – diEcho 2011-05-24 11:29:56

您应该从.image删除float: left。

这是某种来自width="100%"，float: left的收缩包装行为和图像缓存的组合的某种WebKit错误。

Live Demo - （检查它在Chrome中，你会看到的图像是全宽）

来源

2011-05-24 11:32:43 thirtydot

如果你知道他们都得到了460像素的宽度为什么不设置width="460"？据我所知，img.width的百分比不是HTML规范的一部分。

如果你想确保图像总是充满它的容器，那么你想要的是CSS样式width:100%。

来源

2011-05-24 11:29:02

由于图像可以更小:)我需要的设计工作智能手机以及没有任何其他样式表或任何东西:) – mnstrflkrn 2011-05-24 11:30:35

总之：从'.image'风格删除float: left;。由于'.image'风格使得包含图像的div向左浮动，因此100％相对于适合图像大小的div大小，因此您可能会在不同的浏览器中获得可变结果。如果您从'.image'样式中删除float: left;，它将填充100％的宽度，并且图像将反过来适合其宽度的100％，并且所有内容都应该很大。

来源

2011-05-24 11:32:41

我试试看... 从IMG标记删除width="100%"并从width:100%;。 img类。不确定该解决方案是否适合您？

来源

2011-05-24 11:36:05 Fredrik

<img>表演奇怪

回答

相关问题