Web → WordPress i height:auto для img

Пишучи черговий проект на JavaScript, натрапив на дивну річ. Якщо коротко, у мене був блок div, в який AJAX запитом додавався HTML контент (текст і картинки). Після додавання вимірювалася висота div -а, й згідно отриманої величини підганялись всі інші елементи. Проблема була в тому, що розмір блоку вимірювався правильно лише тоді, коли картинки уже закешовані, в іншому випадку, вони просто не встигали завантажитися і я отримував неправильний розмір.

Найпростішим й найбільш логічним рішенням здалось прописати розміри безпосередньо в тег img:

<img src="..." width="500" height="350" alt="..." />

Незважаючи на всю його логічність, результат виявився нульовим! Було витрачено багато часу на пошук альтернативних варіантів, та обговорення проблеми з колегами. Однозначно прийнятного рішення знайти так і не вдалося, тому нашвидкуруч накидав тест, щоб перевірити поведінку в чистих, «лабораторних умовах».

Як і передбачалося, все справно відпрацьовувало. Вказані в зображенні розміри дозволяли браузеру зарезервувати необхідний простір і розміри вимірювалися одразу правильно. Так чому ж воно не працює в wordpress?

Перевірка стилів виявила феєричну річ, для зображень в постах застосовується:

height:auto; /* Make sure images with WordPress-added height and width
attributes are scaled correctly */
width:auto; /* Prevent stretching of full-size and large-size images with
height and width attributes in IE8 */

Я категорично не розумію, навіщо WP автоматом прописує розміри зображень, якщо потім всі його старання анулюються декількома стилями. Чому б це зображенню масштабуватися не правильно, якщо висота і ширина прописані правильно? А якщо не правильно, то ж користувач сам собі «злобний буратіно». Щодо IE8, то я краще промовчу.

В результаті, баг локалізовано, метод боротьби знайдено (просто не юзайте стандартні теми).

Happy end.

13.02.2012 19:01 Автор: Strange_V Хіти: 336

Один комментар

Напишіть відгук