在我的 div 中调整背景图像的大小 [重复]答案

【问题标题】：Resize background Image in my div [duplicate]在我的 div 中调整背景图像的大小 [重复]
【发布时间】：2012-09-09 13:14:30
【问题描述】：

可能重复：
Set size on background image with CSS?

我需要找到一个解决方案，如何获得与我已经实现here 但使用图像标签的背景图像相同的效果。换句话说，我可能需要使用 Javascript 来做到这一点，但我没有找到任何合适的解决方案。

这里是示例页面中我的正文的 Html。

     <div id="contacto">

       <div class="home">

       </div>     

  </div>

CSS 如下：

  #contacto {
  background-image: url("../img/barcelona-buildings.jpg");
  background-attachment: fixed;
  background-position: center 965px;
  height: 350px;
  width: 100%;
  margin-top: 75px;
  box-shadow: 2px 1px 6px 0 #888888 inset;
  -moz-box-shadow: 2px 1px 6px 0 #888888 inset;
  -webkit-box-shadow:  2px 1px 6px 0 #888888 inset;
}


.home {
    overflow: hidden;
    z-index: 1;
}

现在，但我想删除 CSS 中的 background-image: url("../img/barcelona-buildings.jpg"); 并在 div class="home" 中使用 <img src="../img/barcelona-buildings.jpg" alt=""> 和 Javascript 自动调整有关显示宽度的 img 大小

有可能吗？我怎样才能实现它？

【问题讨论】：

为什么要去掉 CSS background-image 属性并使用 <img> 标签——你需要动态选择渲染不同的图像吗？这种情况下，可以动态生成div的style属性吗？
不，实际上不，我被要求使用 javascript... 这可能吗？你会怎么做？

标签： html css background-image

【解决方案1】：

IMG 可以这样写：

.home img{
  position:fixed;
  width:100%;
  height:auto;
}

【讨论】：

这样，图片越过下面显示的内容
为您的内容提供更高的 z-index
例如这样写 .content{position:relative;z-index:5}
.content，它在哪里？添加为图像的类？