Img ЦСИ VS CSS фоновое изображение нет внутреннего Размеры

Question

У меня уценки с HTML, построенный внутри и мне нужно изменить следующее:

<img src="..." /> 

В

<img class="image" /> // Could also be a div, doesn't matter 

И дать ему фон -изображение CSS-стиля (это связано с комплектом веб-пакетов и тем фактом, что у меня нет импорта и переменных в файлах .md)

Проблема в том, что первая опция загружает изображение должным образом без га ving, чтобы указать высоту/ширину, а второй подход ничего не показывает, если я не укажу высоту/ширину.

Fiddle demonstrating issue

Почему это и есть способ обойти это без указания высоты/ширины для каждой такой встречаемости?

Answer 1

Лучшее, что вы можете сделать, это рассчитать долю img, а затем использовать значение для padding и cover, чтобы соответствовать, что:

В качестве примера, если изображение 1:1 доля:

.image { 
 
    background-image: url('http://i.imgur.com/3Zh2iqf.jpg'); 
 
    background-repeat: no-repeat; 
 
    background-size:cover; 
 
    padding-top:100%; 
 
}

<div> 
 
    <div class="image"> 
 
    </div> 
 
</div>