растянуть HTML-контейнер в соответствии с размером фонового изображения

Можно написать CSS, который растягивает фоновое изображение контейнера, чтобы он соответствовал контейнеру. Но возможно ли сделать обратное, то есть написать CSS, который делает размер контейнера соответствующим фону?растянуть HTML-контейнер в соответствии с размером фонового изображения

В прошлом я использовал уродливый взломать с помощью JQuery (что меня не устраивает, потому что оно зависит от размеров изображения, которое на самом деле указано в имени файла изображения). Поэтому мое сильное предпочтение заключается в том, чтобы сделать это с помощью CSS, но если это невозможно, то я также буду доволен самым чистым решением Javascript/JQuery.

(Примечание стороны:.. Это, без сомнения, кажется странным, что нужно хотеть сделать Причина заключается в том, что я работаю с движком рендеринга, который выплевывает изображение размера, в соответствии с определенными параметрами устройства)

источник

2012-05-14 McGarnagle

Используйте jquery и установите переменные равным для хранения размера изображения. а затем используйте css. оператора для изменения размера содержимого по ширине и высоте. –

Я не думаю, что это возможно с помощью только css, но я не могу сказать, что многое из чего-либо невозможно. Я не уверен, что ваш прецедент, но вы можете встроить img в элемент, который вы устанавливаете фон. Установка src тега img на один и тот же рисунок заставит браузер отображать родительский элемент с одинаковыми размерами.

Используя css, вы можете отобразить элемент скрытым, а фоновый элемент будет отображаться в полном размере. Вы также можете использовать jQuery для динамического ввода скрытого элемента img с тем же фоновым изображением, установленным на элементе обертки.

<!DOCTYPE html> 
<html> 
<head> 
    <style type="text/css"> 
     div .img { visibility: hidden; } 
     div { background: url(img.jpg) top left no-repeat; } 
    </style> 
</head> 
<body> 
    <div><img src="img.jpg" /></div> 
</body> 
</html>

Главное следствие этого метода заключается в том, что IE и, возможно, другие браузеры будут загружать изображение дважды. Chrome достаточно умен, чтобы избежать этой проблемы. Но я не тестировал FF, Safari или Opera.

источник

2012-05-14 18:59:46

Элементы не знают размеров фоновых изображений.

Вам необходимо сделать это с помощью JavaScript. Вы можете прочитать изображение в переменной, затем проверить размеры там и перенести их в контейнер.

источник

2012-05-14 18:50:53

Как вы рекомендуете извлекать размеры изображения из самих данных изображения? Вы предлагаете, чтобы @dbaseman использовал объект XMLHTTPRequest для чтения файла с сервера, а затем расшифровал метаинформацию изображения? –

Нет, просто используйте: var tmp = new Image(); tmp.onload = функция тест; tmp.src = '...', то в тестовой функции вы можете прочитать размер изображения –

растянуть HTML-контейнер в соответствии с размером фонового изображения

ответ

Смежные вопросы