2016-03-05 82 views
0

我有一個產品的下拉菜單,我想要下拉菜單中的每個選項旁邊的產品圖片。我用這行復制這條線在使用多個產品不是所有的照片看起來,即使我給的高度和寬度相同的大小時,要做到這一點圖片大小html和css

<img src="http://www.products.com/products/product1.png" 
alt="Product1" height="20" width="22" class="itemImg" 
style="float:right;position:absolute; top: 6px; right: 20px;"> 

不過。是否可以立即將所有圖片製作成相同尺寸,而無需修改每張圖片的高度和寬度?

+0

你可以使用[的jsfiddle(https://jsfiddle.net/)複製你的代碼。我不認爲這裏有人會試圖從'img'標籤中複製你的問題。 –

+0

爲塊提供完整的腳本,HTML和CSS。 –

+0

請提供您嘗試過什麼工作的jsfiddle .. –

回答

0

你的問題很不清楚,你應該提供更多的代碼,但是!您可以將css用於製作相同尺寸的照片。並刪除position: absolute,因爲所有將重疊到對方。 我創建了一個片段檢查,希望它會起作用。

img.itemImg{width:150px; height:150px; background-color:green; position:relative !important;}
<img src="http://www.products.com/products/product1.png" 
 
alt="Product1" height="20" width="22" class="itemImg" 
 
style="float:right;position:absolute; top: 6px; right: 20px;"> 
 

 
<img src="http://www.products.com/products/product1.png" 
 
alt="Product1" height="20" width="22" class="itemImg" 
 
style="float:right;position:absolute; top: 6px; right: 20px;"> 
 

 
<img src="http://www.products.com/products/product1.png" 
 
alt="Product1" height="20" width="22" class="itemImg" 
 
style="float:right;position:absolute; top: 6px; right: 20px;"> 
 

 
<img src="http://www.products.com/products/product1.png" 
 
alt="Product1" height="20" width="22" class="itemImg" 
 
style="float:right;position:absolute; top: 6px; right: 20px;"> 
 

 

 
<img src="http://www.products.com/products/product1.png" 
 
alt="Product1" height="20" width="22" class="itemImg" 
 
style="float:right;position:absolute; top: 6px; right: 20px;"> 
 

 
<img src="http://www.products.com/products/product1.png" 
 
alt="Product1" height="20" width="22" class="itemImg" 
 
style="float:right;position:absolute; top: 6px; right: 20px;"> 
 

 
<img src="http://www.products.com/products/product1.png" 
 
alt="Product1" height="20" width="22" class="itemImg" 
 
style="float:right;position:absolute; top: 6px; right: 20px;"> 
 

 
<img src="http://www.products.com/products/product1.png" 
 
alt="Product1" height="20" width="22" class="itemImg" 
 
style="float:right;position:absolute; top: 6px; right: 20px;"> 
 

 
<img src="http://www.products.com/products/product1.png" 
 
alt="Product1" height="20" width="22" class="itemImg" 
 
style="float:right;position:absolute; top: 6px; right: 20px;"> 
 

 
<img src="http://www.products.com/products/product1.png" 
 
alt="Product1" height="20" width="22" class="itemImg" 
 
style="float:right;position:absolute; top: 6px; right: 20px;">