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

Я исследовал это и нашел решение для JavaScript, поэтому задайтесь вопросом, может ли кто-нибудь узнать, возможно ли решение CSS ...

Вот фрагмент кода:

<�Сильный> HTML

<div id="container">
        This is a small amount of text to appear over the stretched 
        background image, but I want to be able to see the entire image.
 </div>

<�Сильный> CSS

div#container 
{
        background: url('images/bigImage.png') no-repeat 0 0;
        background-size: 100%; /* makes the image stretch (vertically and horizontally) to the width of the device, so I've no idea what height the background image will be rendered at.*/
}

Есть ли какой-нибудь CSS, который я могу использовать, чтобы фоновое изображение покрывало весь div, причем все изображение было видимым?

Заранее спасибо.

1
nl ja de
Поскольку использование «background-size: 100%» изменяет визуализированную высоту фонового изображения на неизвестное значение.
добавлено автор ban-geoengineering, источник
... это совершенно законный вопрос - особенно. так как пока не существует решения.
добавлено автор ban-geoengineering, источник
Почему downvote ?!
добавлено автор ban-geoengineering, источник
Да, но тогда вы видите только верхнюю полосу изображения bg. Мне нужен код CSS, который сделает div таким же высоким, как (растянутое) изображение bg.
добавлено автор ban-geoengineering, источник
@ user1617737: Подходы всех ответов разные. Это означает, что заданный вами вопрос имеет много свободных концов, и каждый свободный конец приводит к выводу, и все опубликованные ответы не принимаются вами, а это означает, что вы забыли указать подробности. В этом случае, если вы можете прикрепить скрипку, что вы получили, и каков ваш ожидаемый результат, мы могли бы помочь
добавлено автор NewUser, источник
Вы используете статическое изображение с вашего жесткого диска, то почему бы вам не вручную ввести height: 100px; , если высота 100 пикселей?
добавлено автор NewUser, источник
Вы пробовали background-size: cover; ?
добавлено автор slamborne, источник

4 ответы

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

Если это так, вы можете использовать обычный элемент img для достижения этого:

<div id="container">
    
    This is a small amount of text to appear over the stretched
    background image, but I want to be able to see the entire image.
</div>

EDIT - Heres a jsfiddle to show how it works: http://jsfiddle.net/Xfxar/

3
добавлено
Похоже, это единственный путь вперед. Большое спасибо.
добавлено автор ban-geoengineering, источник

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

<�Р> фон-размер: крышка; </р>

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

<�Р> фон-размер: содержать; </р>
2
добавлено
Спасибо за попытку. Возможно, единственным обходным решением, которое я могу использовать, является создание изображения переднего плана, а не фонового изображения ...
добавлено автор ban-geoengineering, источник
Я уже использую , но используя высоту: 100% не делает div той же высоты, что и фоновое изображение.
добавлено автор ban-geoengineering, источник
Да, но помните, что это неизвестный размер изображения, потому что это неизвестная ширина div.
добавлено автор ban-geoengineering, источник
... использование 'contains' или 'cover' не изменяет размер div, что я и хочу делать здесь.
добавлено автор ban-geoengineering, источник
Использование обложки делает изображение bg правильной шириной, но вы видите только верхние 10% изображения bg. Как я могу измерить div так, чтобы можно было увидеть все его изображение bg?
добавлено автор ban-geoengineering, источник
Ни один из них не делает этого.
добавлено автор ban-geoengineering, источник
Насколько мне известно, вам нужно поместить в свой html-документ , чтобы сделать эту работу. Else, как справедливо говорят другие ответы, width: 100%; height: 100%; должен работать.
добавлено автор Cheeku, источник
Подождите секунду ... Так что вы точно хотите изменить размер div в соответствии с размером изображения?
добавлено автор Cheeku, источник
Я пробовал свой код и многое другое ... Я лично заключил, что нет «CSS» решения.
добавлено автор Cheeku, источник
Как вы сказали, правильный способ сделать это - использовать обычный элемент img (см. Мой ответ), но я бы не считал это «обходным путем» - я думаю, что было бы семантически лучше сделать это таким образом?
добавлено автор am_, источник

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

Если вы используете PHP, это легко:

<?php
$myURL = "http://i.imgur.com/AiAeQyU.gif";
$myImage = getimagesize($myURL);
?>

<div 
style="
background: url('<?php echo $myURL; ?>') 0 0 no-repeat; 
width: <?php echo $myImage[0] . 'px'; ?>; 
height: <?php echo $myImage[1] . 'px'; ?>
">

Your content

</div>

Надеюсь, это поможет.

1
добавлено
Спасибо, но изображение растягивается до ширины окна просмотра, поэтому, если мы не знаем ширину окна просмотра, мы не знаем ширины и высоты изображения.
добавлено автор ban-geoengineering, источник

Ширину CSS можно использовать в ширину: 100% и высоту: 100% на div, чтобы заняться оставшимся пространством родительского div, если я понимаю, что вы просите. Похоже, вы пытаетесь получить фоновое изображение, чтобы растянуться до размера устройства, и уже делаете это: в общем, если вы хотите, чтобы DIV занимал все пространство, вы можете использовать проценты в CSS. Я полагаю, что если в этом случае вы установите для фонового изображения div значение 100% страницы, а также текстовый div, вы должны заполнить всю страницу фоном.

0
добавлено
Спасибо, но div не должен охватывать всю страницу. Div просто должен быть той же высоты, что и его (растянутое) фоновое изображение.
добавлено автор ban-geoengineering, источник
Верстка сайтов HTML/CSS/JS/PHP
Верстка сайтов HTML/CSS/JS/PHP
3 439 участник(ов)

Правила группы: напишите !rules в чате. Группа Вк: vk.com/web_structure Freelancer: @web_fl Веб Дизайн: @dev_design Маркетолог: @topmarkening Автор: @M_Boroda

CSS — русскоговорящее сообщество
CSS — русскоговорящее сообщество
1 502 участник(ов)

Сообщество любителей CSS Возникли проблемы с CSS? – пиши сюда, обсудим и предложим самое лучшее решение Работа: @css_ru_jobs Правила: https://teletype.in/@css_ru/r1EWtQ2w7 Приходите в наши чаты @javascript_ru и @frontend_ru Флуд: @css_flood

Чат — Типичный Верстальщик
Чат — Типичный Верстальщик
1 080 участник(ов)

Основной канал: @tpverstak Обратная связь: @annblok Все ссылки на соц.сети проекта: http://taplink.cc/tpverstak ПРАВИЛА ЧАТА — https://teletype.in/@annblok/BygPgC3E7

Веб-Технологи: UI/UX, Вёрстка, Фронтенд
Веб-Технологи: UI/UX, Вёрстка, Фронтенд
167 участник(ов)

Всё про веб-дизайн и вёрстку. А также: HTML, CSS, флекс и бутстрапы, шаблонизаторы, препроцессоры, методологии, аглифаеры, улучшаторы и обфускаторы. Обсуждаем темы юзабилити, устраиваем А/В тесты лендингов, и проводим аудит.

DTP :: @DTPublish
DTP :: @DTPublish
147 участник(ов)

Обсуждаемые темы: полиграфия, препресс, верстка, дизайн, иллюстрации, скрипты, плагины. Канал - @DTPublishing

css_jobs
css_jobs
26 участник(ов)

Чат для вопросов по css и html: @css_ru Флуд: @css_flood Канал с вакансиями и резюме: @css_jobs_feed

css_флуд
css_флуд
10 участник(ов)