div 高度到图像高度和图像宽度到 div 宽度答案

【问题标题】：Div height to image height and image width to div widthdiv 高度到图像高度和图像宽度到 div 宽度
【发布时间】：2016-02-28 18:32:33
【问题描述】：

我有一个用作容器的 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% 屏幕宽度调整大小之后）（无拉伸）。有什么办法吗？我尝试了很多最小高度和宽度的组合，但到目前为止没有任何效果。如果可能，我更喜欢仅使用 CSS 和 HTML 的解决方案。

【问题讨论】：

【解决方案1】：

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

基本上是

.img1 {width: 100%;}

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

【讨论】：

【解决方案2】：

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

另外，您的图像可能小于或大于屏幕宽度，那怎么办？您要滚动还是缩放？

【讨论】：