<img> ведет себя странно

Question

Я сделал небольшую галерею (http://www.kongeboa.dk/billeder/3/Coco/) Если вы обновите и выберете просмотр одного из других эскизов под изображением, вы увидите, что размер изображения изменяется случайным образом ... У меня ширина тега изображения установлена ​​на 100% Я уверен, что все изображения имеют размер 460px, чтобы заполнить ширину дизайна. После просмотра всех миниатюр большое изображение отображается в правильном размере (460 пикселей)

Проблема возникает в Safari и Chrome. OSX и Windows.

Понятия не имею, почему это происходит, и я не знаю, как его отладить ...

Answer 1

Короче говоря : удалить float: left; из стиля '.image'.

Поскольку стиль '.image' делает div, содержащий изображение, плавающим влево, значение 100%относительно размера div, размеры которого соответствуют изображению, поэтому вы, вероятно, получите разные результаты в разных браузерах.Если вы удалите float: left; из стиля '.image', он заполнит 100% ширины, а изображение в свою очередь будет соответствовать 100% его ширины, и все должно быть великолепно.

Answer 2

Вы должны удалить float: left из .image.

Это какая-то ошибка WebKit из некоторой комбинации width="100%", режима сжатия float: left и кэширования изображений.

Демонстрация в реальном времени - (отметьте это в Chrome, вы увидите, что изображение полноразмерное)

Answer 3

Я попробую ... Удалите width="100%" из img-тега и удалите width:100%; из класса .img.Не уверен, что это решение будет работать для вас?

Answer 4

Если вы знаете, что все они имеют ширину 460 пикселей, почему бы не установить width="460"? Насколько я помню, проценты для img.width не являются частью спецификации HTML.

Если вы хотите убедиться, что изображение всегда заполняет свой контейнер, тогда вам нужен стиль CSS width:100%.