當瀏覽器放大或縮小時，填充會發生變化

Question

我有一個縮略圖圖像和另一個與縮略圖圖像重疊的較小圖像。但是，當我放大和縮小時，填充更改爲較小的重疊圖像，只有CHROME瀏覽器才存在問題。它與IE和Firefox的工作很好。我嘗試使用百分比來設置較小圖像的填充值，但問題仍然存在。 這裏是圖像。

這是HTML

<div class="car-item"> 
         <div class=" car-image"> 
          <img src="/~/media/images/thumb.ashx" alt="Image 1" /> 
         </div> 

          <div class="car video"> 
           <a href="#">VIDEO</a> 
          </div> 

    <div> 

汽車視頻的位置是絕對 汽車項目位置相對 和汽車圖像是靜止

Answer 1

有時使用百分比時您會遇到問題。這是什麼時候使用absolute positioning的好例子。

我不知道你的代碼是什麼樣的，所以這裏是一個基本的例子，說明如何用絕對定位來完成上面的圖片。我使用了span標籤而不是附加的圖片標籤，但它應該都是一樣的。

您可能需要稍微修改您的HTML和CSS才能使其在您的環境中正常工作。

http://jsfiddle.net/6C8gT/

這裏是一個更新的jsfiddle（http://jsfiddle.net/6C8gT/1/）使用您的標記和另一個標記降低（http://jsfiddle.net/6C8gT/2/）。除非你有將來的計劃，否則你並不需要這些DIV。

我只是做了我在下面發佈的內容，但修改了CSS以匹配您的HTML。你必須查看jsFiddles。

HTML

<div class="container"> 
    <img class="thumb" src="http://lorempixel.com/300/200/" /> 
    <span>Video</span> 
</div> 

CSS

.container { 
    position: relative; 
} 
.container img { 
    display: block; 
} 
.container span { 
    color: white; 
    background-color: black; 
    padding: 5px 10px; 
    position: absolute; 
    left: 0; 
    bottom: 0; 
}