Как получить высоту div для автоматической настройки на размер фона?

Question

Как мне получить div, чтобы автоматически подстраиваться под размер фона, который я для него установил, не устанавливая для него конкретную высоту (или минимальную высоту)?

Answer 1

Существует очень хороший и крутой способ заставить фоновое изображение работать как элемент 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/

Answer 2

Другим, возможно, неэффективным решением было бы включить изображение в элемент 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>

Answer 3

Невозможно автоматически настроить размер фонового изображения с помощью CSS.

Вы можете взломать его, измерив фоновое изображение на сервере, а затем применив эти атрибуты к div, как уже упоминали другие.

Вы также можете взломать некоторый javascript для изменения размера div в зависимости от размера изображения (после загрузки изображения) - это в основном то же самое.

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

Answer 4

Этот ответ похож на другие, но в целом является лучшим для большинства приложений. Вы должны знать размер изображения перед рукой, что вы обычно делаете. Это позволит вам добавлять наложенный текст, заголовки и т. Д. Без отрицательного заполнения или абсолютного позиционирования изображения. Они задают процент заполнения, чтобы он соответствовал соотношению сторон изображения, как показано в примере ниже. Я использовал этот ответ и, по сути, просто добавил фоновое изображение.

.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>

Answer 5

Может быть, это может помочь, это не совсем фон, но вы поняли:

<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>

Answer 6

Уверен, это никогда не будет видно здесь. Но если ваша проблема была такой же, как у меня, это было мое решение:

.imaged-container{
  background-image:url('<%= asset_path("landing-page.png") %> ');
  background-repeat: no-repeat;
  background-size: 100%;
  height: 65vw;
}

Я хотел, чтобы в центре изображения был div, и это позволит мне это.

Answer 7

Существует чистое решение CSS, которое пропустили другие ответы.

Свойство «content:» в основном используется для вставки текстового содержимого в элемент, но также может использоваться для вставки содержимого изображения.

.my-div:before {
    content: url("image.png");
}

Это заставит div изменить его высоту в соответствии с фактическим размером пикселя изображения. Чтобы изменить ширину, добавьте:

.my-div {
    display: inline-block;
}

Answer 8

Вы можете сделать это на стороне сервера: измерив изображение, а затем установив размер div, ИЛИ загрузив изображение в JS, прочитайте его атрибуты и затем установите размер DIV.

И вот идея, поместите то же изображение внутри элемента div, что и тег IMG, но сделайте его видимым: скрытый + игра с относительным положением + задайте этому элементу изображения фон.

Answer 9

У меня была эта проблема, и я нашел ответ Хасанави, но у меня возникла небольшая ошибка при отображении фонового изображения на широком экране - фоновое изображение не распространилось на всю ширину экрана.

Итак, вот мое решение - основанное на коде Хасанави, но лучше ... и оно должно работать как на очень широких, так и на мобильных экранах.

/*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, чтобы поиграться с экраном размеры и исправить эту проблему.

Answer 10

Как насчет этого:)

.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>

Демо: http://jsfiddle.net/josephmcasey/KhPaF/