Высота div до высоты изображения и ширины изображения до ширины div

Question

У меня есть div, который я использую в качестве контейнера, и изображение, которое я использую как «фон» (не в буквальном смысле, мне сказали, что я не мог сделать это с помощью атрибута фона) а затем содержание DIV:

CSS

#container { 
    display:table; 
    width: 100%; 
    min-width:100%; 
} 

.img1 { 
    //DON'T KNOW WHAT TO PUT HERE; 
} 

#content { 
    //not important; 
} 

HTML

<div id="container"> 
    <img class="img1" src="img.png"/> 
    <div id="content"> Content </div> 
</div> 

Мне нужно прод ainer div - 100% ширины экрана и, следовательно, содержащееся изображение, в то время как обе они должны иметь конечную высоту изображения (после изменения размера экрана на 100% ширины экрана) (без растягивания). Любой способ сделать это? Я пробовал много сочетаний min-height и width, но пока ничего не получилось. Я предпочитаю только CSS и HTML-решения, если это возможно.

Answer 1

Не совсем уверен, что вы имеете в виду, но, как это выглядит: https://jsfiddle.net/b76fjtcv/

в основном это

.img1 {width: 100%;} 

Это updated version of the fiddle также добавляет максимальную ширину в IMG, так что не слишком размыто. Просто установите максимальную ширину .img1 на полную ширину изображения.

Answer 2

Какие изображения? У вас его есть. посмотрите на this, вы также можете использовать таблицы для форматирования, если вам не нравится с div.

Кроме того, ваше изображение может быть меньше или больше ширины экрана, что тогда? Вы хотите прокрутку или масштабирование?