响应式设计中的绝对定位图像

Question

我需要一些帮助。

我目前正在开发一个响应式网站。
将发布指向该网站 psd 图像的链接，以便您了解
它应该是什么样的。

Link to the site itself
该站点的宽度为 1200 像素，当您缩放站点时，您会看到船什么也不做

现在解决问题。

问题出在这艘船上，这个 img 是 1019x1732 并且是绝对定位的。并且需要这样做，因为我必须使用 z-index 才能将其定位在其他一些 div 之上，因为它相当大。
我试图把它作为背景图像和一个带有相对 div 的 img 标签。但什么也没发生。

如果我的问题难以理解，我表示感谢。很难向其他人解释问题，它总是在我的脑海中更有意义。
这是我的代码：

我的html

<div id="wrapperHero">

        <div id="hero">

            <p>The "Banarly Group" has been operating<br>
                in Nigerian, Gabonese and Cameroon waters<br>
                since 1995.
            </p>
            <div id="circle">
                <p>a fleet of<br> 
                    <span class="number">24</span><span class="trawler">trawlers</p>
            </div>
        </div>
        <div id="boat">
            <img src="img/BAN_herofg.png" alt="boat">
        </div>

    </div>

我的 CSS：

#wrapperHero {
width: 100%;
background-image: url(../img/BAN_herobg.png);
background-repeat: repeat-x;
min-height: 795px;
margin-top: -23px;}

#hero {
max-width: 1200px;
width: 100%;
height: 100%;
margin: 0 auto;}

#boat {
background-image: url(../img/BAN_herofg.png);
background-repeat: no-repeat;
position: absolute;
height: 100%;
width: 100%;
z-index: 1;
right: -6%;
top: 240px;}

#circle {
border-radius: 50%;
width: 18.3333%;
min-height: 220px;
background-color: #fff;
background-color: rgba(255,255,255,0.2);
float: right;
margin: -230px 21.6666% 0 0;}

1：

Answer 1

如果我的问题是正确的，您应该这样做： 从#boat 中删除background-image 属性 在里面创建<img src="img/BAN_herofg"> 将max-width: 100% 设置为<img>。

希望这能解决您的问题。

Answer 2

您可以将 background-size ， background-position-x 与不同的媒体一起使用 :)

 #boat {
 background-size: 590px;
 background-position-x: 79px;
}

 @media (min-width: 450px) and (max-width: 960px) {
     #boat {background-size: //use different size;
     background-position-x://use different size;}
}

Answer 3

使用 css 媒体查询来解决您的问题...

例如：

  @media (min-width: 600px) and (max-width: 800px) {
  html { background: red; }
  }