如何讓圖像粘貼到特定元素HTML

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將它們相對於瀏覽器而不是父元素進行定位。