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

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

0 голосов
/ 30 апреля 2009

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

1 Ответ

0 голосов
/ 15 августа 2009

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

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

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

е. 

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

Фоны Причудливого CSS 3

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

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

...