Question

目前正在建立一个电子商务网站，我已经获得了合理的响应图像。但是，我注意到当我的浏览器窗口达到100％时，图像似乎应该是它们应该存在的位置。半响应图像也根据浏览器调整大小。但是，当我的浏览器调整大小时，图像会从导航栏浮动。有没有一种方法可以我可以让图像保持固定在导航栏上？这是我的代码，所以他们不会离开？：

图片的HTML：

<img class = "leftBanner" src = "hairtest1.jpg" alt ="Woman hair banner one">
<img class = "rightBanner" src = "hairtest2.jpg" alt ="Woman hair banner two">

图片的CSS：

  img.leftBanner {
max-width: 50%;
max-height:auto;
position:relative;
margin-top:-6%;
margin-left:-1%;
}
img.rightBanner {
max-width:50%;
max-height:auto;
position:relative;
margin-top:-28.7%;
margin-left:60%;
}

导航栏的HTML：

<div id='cssmenu'>
<ul>
   <li class='active'><a href='#'>Home</a></li>
   <li><a href='#'>L'Homme</a></li>
   <li><a href='#'>Femme</a></li>
   <li><a href='#'>Extensions</a></li>
   <li><a href='#'>Accessories</a></li>
   <li><a href='#'>Contactez</a></li>

</ul>
</div>

Answer 1

使用margin-top和margin-left代替top和left设置图片样式。在绝对定位的元素上使用top和left将它们相对于浏览器而不是父元素定位。

如何让图像粘贴到特定元素HTML上

1 个答案: