Как заставить высоту div автоматически адаптироваться к размеру фона?
-
03-07-2019 - |
Вопрос
Как мне заставить div автоматически подстраиваться под размер фона, который я для него установил, не устанавливая для него определенную высоту (или минимальную высоту)?
Решение
Другим, возможно, неэффективным решением было бы включить изображение в img
элемент установлен в visibility: hidden;
.Затем сделайте background-image
окружающего div так же, как изображение.
Это установит окружающий div по размеру изображения в img
элемент, но отображать его как фон.
<div style="background-image: url(http://your-image.jpg);">
<img src="http://your-image.jpg" style="visibility: hidden;" />
</div>
Другие советы
Есть очень хороший и классный способ заставить фоновое изображение работать как img
элемент, чтобы он отрегулировал свой height
автоматически.Вам нужно знать образ width
и height
соотношение.Установить height
контейнера на 0 и установите padding-top
в процентах в зависимости от соотношения изображений.
Это будет выглядеть следующим образом:
div {
background-image: url('http://www.pets4homes.co.uk/images/articles/1111/large/feline-influenza-all-about-cat-flu-5239fffd61ddf.jpg');
background-size: contain;
background-repeat: no-repeat;
width: 100%;
height: 0;
padding-top: 66.64%; /* (img-height / img-width * container-width) */
/* (853 / 1280 * 100) */
}
Вы только что получили фоновое изображение с автоматической высотой, которое будет работать так же, как элемент img.Вот рабочий прототип (вы можете изменить размер и проверить высоту div): http://jsfiddle.net/TPEFn/2/
Невозможно автоматически настроить размер фонового изображения с помощью CSS.
Вы можете обойти это, измерив фоновое изображение на сервере, а затем применив эти атрибуты к div, как уже упоминали другие.
Вы также можете взломать какой-нибудь javascript, чтобы изменить размер div в зависимости от размера изображения (после загрузки изображения) — это, по сути, то же самое.
Если вам нужно, чтобы ваш div автоматически подгонял изображение, я мог бы спросить, почему бы вам просто не поместить <img>
тег внутри вашего div?
Этот ответ похож на другие, но в целом является лучшим для большинства приложений.Вам необходимо заранее узнать размер изображения, что вы обычно и делаете.Это позволит вам добавлять наложенный текст, заголовки и т. д.без отрицательного заполнения или абсолютного позиционирования изображения.Ключевым моментом является установка % отступа в соответствии с соотношением сторон изображения, как показано в примере ниже.я использовал этот ответ и, по сути, просто добавил фоновое изображение.
.wrapper {
width: 100%;
/* whatever width you want */
display: inline-block;
position: relative;
background-size: contain;
background: url('https://upload.wikimedia.org/wikipedia/en/thumb/6/67/Wiki-llama.jpg/1600px-Wiki-llama.jpg') top center no-repeat;
margin: 0 auto;
}
.wrapper:after {
padding-top: 75%;
/* this llama image is 800x600 so set the padding top % to match 600/800 = .75 */
display: block;
content: '';
}
.main {
position: absolute;
top: 0;
bottom: 0;
right: 0;
left: 0;
color: black;
text-align: center;
margin-top: 5%;
}
<div class="wrapper">
<div class="main">
This is where your overlay content goes, titles, text, buttons, etc.
</div>
</div>
Возможно, это поможет, это не совсем предыстория, но идею вы поняли:
<style>
div {
float: left;
position: relative;
}
div img {
position: relative;
}
div div {
position: absolute;
top:0;
left:0;
}
</style>
<div>
<img src="http://antwrp.gsfc.nasa.gov/apod/image/0903/omegacen_davis.jpg" />
<div>Hi there</div>
</div>
Я почти уверен, что здесь такого никогда не видели.Но если ваша проблема была такой же, как и моя, вот мое решение:
.imaged-container{
background-image:url('<%= asset_path("landing-page.png") %> ');
background-repeat: no-repeat;
background-size: 100%;
height: 65vw;
}
Я хотел иметь элемент div в центре изображения, и это позволит мне это сделать.
Существует чистое решение CSS, которое пропустили другие ответы.
Свойство «content:» в основном используется для вставки текстового содержимого в элемент, но также может использоваться для вставки содержимого изображения.
.my-div:before {
content: url("image.png");
}
Это приведет к тому, что div изменит свою высоту до фактического размера пикселя изображения.Чтобы изменить размер ширины, добавьте:
.my-div {
display: inline-block;
}
Вы можете сделать это на стороне сервера:измерив изображение и затем установив размер div, ИЛИ загрузив изображение с помощью JS, прочитав его атрибуты и затем установив размер DIV.
И вот идея: поместить в div то же изображение, что и тег IMG, но сделать его видимым:скрытый + поиграйте с относительной позицией + добавьте этому div изображение в качестве фона.
У меня возникла эта проблема, и я нашел ответ Хасанави, но у меня возникла небольшая ошибка при отображении фонового изображения на широком экране: фоновое изображение не распространялось на всю ширину экрана.
Итак, вот мое решение - на основе кода Хасанави, но лучше...и это должно работать как на очень широких, так и на мобильных экранах.
/*WIDE SCREEN SUPPORT*/
@media screen and (min-width: 769px) {
div {
background-image: url('http://www.pets4homes.co.uk/images/articles/1111/large/feline-influenza-all-about-cat-flu-5239fffd61ddf.jpg');
background-size: cover;
background-repeat: no-repeat;
width: 100%;
height: 0;
padding-top: 66.64%; /* (img-height / img-width * container-width) */
/* (853 / 1280 * 100) */
}
}
/*MOBILE SUPPORT*/
@media screen and (max-width: 768px) {
div {
background-image: url('http://www.pets4homes.co.uk/images/articles/1111/large/feline-influenza-all-about-cat-flu-5239fffd61ddf.jpg');
background-size: contain;
background-repeat: no-repeat;
width: 100%;
height: 0;
padding-top: 66.64%; /* (img-height / img-width * container-width) */
/* (853 / 1280 * 100) */
}
}
Как вы могли заметить, background-size: contain;
свойство не очень хорошо вписывается в очень широкие экраны, и background-size: cover;
свойство не очень хорошо отображается на мобильных экранах, поэтому я использовал это @media
атрибут, чтобы поиграть с размерами экрана и исправить эту проблему.
Как насчет этого :)
.fixed-centered-covers-entire-page{
margin:auto;
background-image: url('https://i.imgur.com/Ljd0YBi.jpg');
background-repeat: no-repeat;background-size:cover;
background-position: 50%;
background-color: #fff;
left:0;
right:0;
top:0;
bottom:0;
z-index:-1;
position:fixed;
}
<div class="fixed-centered-covers-entire-page"></div>
Если это одно предопределенное фоновое изображение, и вы хотите, чтобы элемент div реагировал без искажения соотношения сторон фонового изображения, вы можете сначала вычислить соотношение сторон изображения, а затем создать элемент div, который сохраняет соотношение сторон, выполнив следующие действия. :
Допустим, вам нужно соотношение сторон 4/1, а ширина div — 32%:
div {
width: 32%;
padding-bottom: 8%;
}
Это происходит из-за того, что отступы рассчитываются на основе ширины содержащего элемента.
Может быть, это может помочь, это не совсем предыстория, но вы поняли простую идею.
<style>
div {
float: left;
position: relative;
}
div img {
position: relative;
}
div div {
position: absolute;
top:0;
left:0;
}
</style>
<div>
<img src="http://www.planwallpaper.com/static/images/recycled_texture_background_by_sandeep_m-d6aeau9_PZ9chud.jpg" />
<div>Hello</div>
</div>
Вы можете сделать что-то вроде этого
<div style="background-image: url(http://your-image.jpg); position:relative;">
<img src="http://your-image.jpg" style="opacity: 0;" />
<div style="position: absolute;top: 0;width: 100%;height: 100%;">my content goes here</div>
</div>
Была эта проблема с Umbraco CMS, и в этом сценарии вы можете добавить изображение в div, используя что-то вроде этого для атрибута 'style' div:
style="background: url('@(image.mediaItem.Image.umbracoFile)') no-repeat scroll 0 0 transparent; height: @(image.mediaItem.Image.umbracoHeight)px"
Я некоторое время занимался этой проблемой и решил написать плагин jquery для решения этой проблемы.Этот плагин найдет все элементы с классом «show-bg» (или вы можете передать ему свой собственный селектор) и рассчитает размеры их фонового изображения.все, что вам нужно сделать, это включить этот код, пометить нужные элементы с помощью class="show
Наслаждаться!
Лучшее решение, которое я могу придумать, — это указать ширину и высоту в процентах.Это позволит вам изменить размер экрана в зависимости от размера вашего монитора.это более адаптивный макет..
Для примера.у вас есть
<br/>
<div> . //This you set the width percent to %100
<div> //This you set the width percent to any amount . if you put it by 50% , it will be half
</div>
</div>
Это лучший вариант, если вам нужен адаптивный макет. Я бы не рекомендовал float, в некоторых случаях float можно использовать.но в большинстве случаев мы избегаем использования float, поскольку это повлияет на множество вещей при кроссбраузерном тестировании.
Надеюсь это поможет :)
на самом деле это довольно легко, если знать, как это сделать:
<section data-speed='.618' data-type='background' style='background: url(someUrl)
top center no-repeat fixed; width: 100%; height: 40vw;'>
<div style='width: 100%; height: 40vw;'>
</div>
</section>
Хитрость заключается в том, чтобы установить вложенный элемент div как обычный элемент управления со значениями размеров, такими же, как значения размеров фона (в этом примере 100% и 40vw).
Я решил это с помощью jQuery.Пока новые правила CSS не разрешают такое поведение изначально, я считаю, что это лучший способ сделать это.
Настройте свои div
Ниже у вас есть div, на котором вы хотите, чтобы появился фон («герой»), а затем внутренний контент/текст, который вы хотите наложить поверх фонового изображения («внутренний»).Вы можете (и должны) переместить встроенные стили в свой класс героя.Я оставил их здесь, чтобы можно было быстро и легко увидеть, какие стили к ним применены.
<div class="hero" style="background-image: url('your-image.png'); background-size: 100%; background-repeat: no-repeat; width: 100%;">
<div class="inner">overlay content</div>
</div>
Рассчитать соотношение сторон изображения
Затем рассчитайте соотношение сторон вашего изображения, разделив высоту изображения на ширину.Например, если высота вашего изображения равна 660, а ширина — 1280, соотношение сторон — 0,5156.
Настройте событие изменения размера окна jQuery для регулировки высоты
Наконец, добавьте прослушиватель событий jQuery для изменения размера окна, а затем рассчитайте высоту вашего героя div на основе соотношения сторон и обновите ее.Это решение обычно оставляет дополнительный пиксель внизу из-за несовершенства вычислений с использованием соотношения сторон, поэтому мы добавляем -1 к полученному размеру.
$(window).on("resize", function ()
{
var aspect_ratio = .5156; /* or whatever yours is */
var new_hero_height = ($(window).width()*aspect_ratio) - 1;
$(".hero").height(new_hero_height);
}
Убедитесь, что он работает при загрузке страницы
Вы должны выполнить приведенный выше вызов изменения размера при загрузке страницы, чтобы размеры изображения были рассчитаны в самом начале.Если вы этого не сделаете, герой div не будет корректироваться, пока вы не измените размер окна.Я настроил отдельную функцию для изменения размера.Вот полный код, который я использую.
function updateHeroDiv()
{
var aspect_ratio = .5156; /* or whatever yours is */
var new_hero_height = ($(window).width()*aspect_ratio) - 1;
$(".hero").height(new_hero_height);
}
$(document).ready(function()
{
// calls the function on page load
updateHeroDiv();
// calls the function on window resize
$(window).on("resize", function ()
{
updateHeroDiv();
}
});
Если вы можете создать изображение в Photoshop, где основной слой имеет непрозрачность около 1 и в основном прозрачен, поместите это изображение в div, а затем сделайте реальное изображение фоновым изображением.ЗАТЕМ установите непрозрачность изображения на 1 и добавьте нужные размеры.
Эта картинка сделана таким образом, и вы даже не можете перетащить невидимое изображение со страницы, и это круто.
просто добавь в div
style="overflow:hidden;"