div高度到圖像高度，圖像寬度到div寬度

Question

我有一個用作容器的div和一個用作“背景”的圖像（從字面上看，不是我被告知我無法使用background屬性執行此操作），然后是一個內容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

兩者都是什么？ 你只有一個。 看看這個 ，如果您對div不滿意，也可以使用表格進行格式化。

另外，您的圖像可能小於或大於屏幕寬度，那又如何呢？ 您要滾動還是縮放？

Answer 2

不確定您的意思，但是看起來如何： https ： //jsfiddle.net/b76fjtcv/

基本上是

.img1 {width: 100%;}

小提琴的此更新版本還為img添加了最大寬度，因此不會太模糊。 只需將.img1的最大寬度設置為圖像的全寬即可。