<img>的行为很奇怪

问题描述

| 我做了一个小画廊（http://www.kongeboa.dk/billeder/3/Coco/） 如果刷新，然后选择查看实际图像下方的其他缩略图之一，则会看到图像随机调整大小... 我将图片标签的宽度设置为100％ 我敢肯定，所有图像的大小均为460像素，可以填充设计的宽度。 查看所有缩略图后，大图以正确的大小显示（460px） 该问题发生在Safari和Chrome中。 OSX和Windows。 我不知道为什么会这样，而且我也不知道如何调试...     

解决方法

您应该从

.image

中删除

float: left

。 这是某种WebKit错误，它来自

width=\"100%\"

，ѭ0的收缩包装行为和图像缓存的某种组合。 实时演示-（在Chrome中进行检查，您会看到图像为全角）     ,简而言之：从\'。image \'样式中删除

float: left;

。 由于\ .image \样式使包含图像的div向左浮动，因此100％相对于div的大小（该尺寸适合图像），因此您可能会在不同的浏览器中获得可变结果。如果您从\'。image \'样式中删除ѭ4,，它将填充宽度的100％，而图像又将适合其宽度的100％，并且所有内容都应是宏大的。     ,如果您知道它们的宽度均为460像素，为什么不设置

width=\"460\"

？据我所知，img.width的百分比不属于HTML规范。 如果要确保图像始终填充其容器，那么您想要的是CSS样式

width:100%

。     ,我试试看... 从img-tag中删除

width=\"100%\"

，从.img类中删除

width:100%;

。不确定该解决方案是否适合您？