Div高度与图像高度和图像宽度为div宽度

Question

我有一个div用作容器和一个用作＆＃34;背景＆＃34; （不是字面意思，我被告知我不能用背景属性做这个）然后是一个内容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>

我需要容器div为100％的屏幕宽度，因此所包含的图像，而它们都必须具有图像的最终高度（在调整大小后获得100％的屏幕宽度）（无拉伸） 。 有办法吗？我尝试了很多最小高度和宽度组合但到目前为止没有任何效果。 如果可能的话，我更喜欢CSS和HTML解决方案。

Answer 1

这两个图像是什么？你只有一个。看看this，你可以使用表格进行格式化，如果你对div不熟悉的话。

此外，您的图像可能比屏幕宽度更小或更大，那么呢？你想滚动还是缩放？

Answer 2

不完全确定您的意思，但看起来如何：https://jsfiddle.net/b76fjtcv/

基本上它是

.img1 {width: 100%;}

此updated version of the fiddle还会为img添加最大宽度，因此它不会太模糊。只需将.img1的最大宽度设置为图像的全宽。