Изменение размера изображения и добавление наложения изображения без использования таблиц и без потери стиля в XML

Question

Я строю систему для создания "фальшивого видео" с миниатюрами и кнопками воспроизведения над ними. Изображения поступают из службы стандартного размера, поэтому у них нет другого выбора, кроме как изменить их размер в HTML. Другое ограничение заключается в том, что кодовый блок должен быть автономным (например, встраивать код) и не зависеть от каких-либо внешних таблиц стилей. Я накладываю кнопку воспроизведения как прозрачный PNG. Моим первым решением было установить отрицательное поле для наложенного изображения с помощью встроенного CSS следующим образом:

<div style="width:340px;height:280px;">
<img src="thumbnail.jpg" width="340" height="280"/>
<div style="margin-top:-280px;"><a href="link-to.video.html">
<img src="transparent-embed-overlay.png" 
border="0"></a></div></div>

Но в XML-ленте для блога прозрачная кнопка воспроизведения "выпадет" из "встраиваний", потому что она не распознает встроенный стиль. Это заставило меня написать таблицу из одной ячейки с изображением в качестве фонового изображения. Но тогда я не мог изменить размер стандартного эскиза изображения, которое мне дали, подгоняя меня к стандартному размеру эскиза.

Вот код, к которому я прибегаю:

<table width="320" height="240" background="thumbnail.jpg">
<tr><td><a href="link-to-video.html">
<img src="transparent-overlay.jpg" border="0"></a></td></tr></table>

Answer 1

Не могли бы вы отправить ссылку на пример?

Из того, что я понимаю, вы динамически изменяете фоновый тег, но вы не можете изменить размер фонового изображения без использования CSS 3, поэтому совместимость нарушена.

Свойство CSS Background может содержать цвет, url, позиции x, y и повтор.

то есть.

background: white url("mypic.jpg") 0 0 no-repeat;

Quirksmode CSS 3 Фоны

Почему вы не можете использовать тег img внутри таблицы, для которого вы динамически изменяете его источник на новое изображение и устанавливаете высоту и ширину на что угодно?

Или, если ваша проблема заключается в том, что пользователь перетаскивает изображения, вы можете просто использовать div вместо изображения, установить его высоту и ширину и поместить его поверх изображений.