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

Question

我需要一些帮助。

我目前正在开发一个响应迅速的网站 将链接发布到网站的psd图像，这样你就可以了解它应该是什么样的
Link to the site itself
该网站的宽度为1200px，当您扩展该网站时，您将看到该船无效

现在问题。

问题在船上，这个img是1019x1732并且位于绝对位置。并且需要这样，因为我必须使用z-index才能将它定位在其他div之上，因为它相当大。
我试图把它作为背景图像和img标签放在它周围的相对div。但没有任何反应。

如果我的问题很难理解，我的同情。我很难向其他人解释问题，总是让我的头脑更加明显 这是我的代码：

我的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

你可以使用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 2

如果我的问题是对的，那么你应该做些什么： 从background-image中移除#boat属性 在里面创建<img src="img/BAN_herofg"> 将max-width: 100%设为<img>。

希望这能解决您的问题。

Answer 3

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

例如：

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