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

Question

Я строю карусель слайд-шоу jquery для театрального сайта, она используется для отображения названий и связанных с ними фотографий 5 самых последних шоу в театре. Шоу и URL-адреса фотографий, которые были загружены для них, загружаются из базы данных и вставляются в структуру ниже:

<div id="slideshow_outercontainer"> <ul id="carousel">
<!-- This is where the <li>s are generated from the database using the photo's url
as a  CSSbackground image -->
</ul> </div>

А затем соответствующие элементы управления размещаются ниже.

Что мне нужно знать, это: Как я могу получить высоту и ширину каждого изображения (используя php или jquery), и сохранить его в сценарии таким образом, чтобы jquery мог достать его, и рандомизировать. То, чего я пытаюсь добиться, - это случайное расположение фонового изображения, но мне нужно знать, насколько велико изображение, чтобы оно не позиционировалось каким-либо образом, который бы выставлял фон элемента.

Кроме того, было бы неплохо анимировать фоновое изображение случайным образом, как какой-то эффект ожогов Кена. Но я думаю, что знаю, как этого добиться, используя animate ()

Надеюсь, здесь кто-нибудь может помочь! Спасибо, Дэн.

Answer 1

Вы не можете сделать это, используя только фоновое изображение. С учетом сказанного вы, вероятно, могли бы получить URL-адрес фонового изображения, затем создать тег dom element / img с этим img, расположить его за пределами экрана влево, получить его размеры и затем уничтожить.

Answer 2

В PHP функция getimagesize ([Filename]) даст вам высоту и ширину изображения. Все, что вам нужно сделать, это дать функции имя файла изображения, и оно вернет массив с высотой, шириной и типом изображения.

Есть пример его использования здесь и документация php.net здесь .