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

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

Answer 1

不太确定你的意思，但看起来如何:https://jsfiddle.net/b76fjtcv/

基本上是

.img1 {width: 100%;}

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