Изменение размера изображения и добавление наложения изображения без использования таблиц и без потери стиля в 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 для блога, кнопка прозрачная игра будет «падать» «встраивает» потому, что он не узнал бы встроенный стиль. Это заставило меня написать таблицу с одной ячейкой с изображением в качестве фонового изображения. Но тогда мне не удалось изменить размер стандартного эскиза изображения, который я даю, заставляя меня указывать размер миниатюры по умолчанию.

FWIW, вот код, я прибегая к использованию:

<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 и повторение.

ie.

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

Quirksmode CSS 3 Backgrounds

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

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