Настройка высоты фонового изображения на 100%

Question

Я пытаюсь установить высоту фонового изображения на 100% или автоматически, но когда я это сделаю, изображение просто не отображается ни одним браузером. Не могу понять причину этого. Это мешает мне делать достойные ответственные образы.

Код следующее:

<div class="responsive_image" /> 

И CSS является следующее:

.responsive_image { 
background-image ("testing_image.jpg"); 
background-size: 100%; 
} 

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

Answer 1

Прежде всего, Ваш background-image пропускает : url после него (как это: background-image: url('testing_image');)

Пример:

.responsive_image { 
 
    height: 100px; 
 
    width: 100px; 
 
    background-image: url('http://placehold.it/50x50'); 
 
    background-repeat: no-repeat; 
 
    background-size: 100%; /* or better, use cover (or contain) if you don't want to stretch images */ 
 
}

<div class="responsive_image"></div>

Answer 2

При установке background-size: 100%, что он рассчитывает на is: background-size: 100% auto, где 100% относится к ширине, а auto относится к высоте (сам размер k аспектное соотношение сторон).

Проблема: ширина 100% от что? Это немного сложно, потому что он рассчитан NOT от <div class="responsive-image">, но родителя <div>. Вероятно, вы не указали ширину в своем родителе, поэтому ширина фона не может быть вычислена, поэтому фон не отображается. Вот почему это происходит.

Существует много способов «сделать фоновое изображение»: использовать contain, cover, px для background-size; или если размер для родителя - это то, что вы действительно хотите, дайте родительской ширине.