自適應縮略圖div，它響應屏幕尺寸

我有一個縮略圖圖像列表，當您調整瀏覽器屏幕大小時，它們都很好地適應並保持相同的高度和寬度。自適應縮略圖div，它響應屏幕尺寸

我需要添加一個縮略圖，以便當沒有圖像時使用居中圖標，但是當我調整瀏覽器的大小時，div並不像圖像一樣展開。

這是爲手機屏幕設計的，但我希望它具有與圖像相同的行爲。

我在代碼中缺少什麼，即時猜測它是一個與高度或邊距/百分比值有關的CSS問題？

我有所有的代碼，我做了演示： -

.gallery li a.addImage { 
display: block; 
margin: 7px 5px 0 5px; 
border: 1px dotted #aaa; 
background-color: #ddd; 
min-height: 58px; 
} 

.test{ 
    background: url("http://icons.iconarchive.com/icons/custom-icon- design/mini/24/Delete-icon.png") no-repeat scroll /*1px -109px*/ center transparent; 
    display: block; width:24px; height:24px; text-align:center; 
    margin: 0 auto; 
    margin-top: 15%; margin-bottom: 15%; 
}

任何幫助將是巨大的感謝。

來源

2013-08-07 John

我知道這不是最優雅的方式，但是難道你不能用空白的圖像替換「空白空間」嗎？所以它會調整其他圖像一樣？

來源

2013-08-07 09:11:33 SaturnsEye

對於班級考試而不是width:24px給予width:inherit。所以新的風格將是

.test{ 
    background: url("http://icons.iconarchive.com/icons/custom-icon- design/mini/24/Delete-icon.png") no-repeat scroll /*1px -109px*/ center transparent; 
    display: block; 
    width:inherit; height:24px; text-align:center; 
    margin: 0 auto; 
    margin-top: 15%; 
    margin-bottom: 15%; 
}

希望這會有所幫助。

來源

2013-08-07 09:43:35

Test Page

我建議你使用<img>標籤，而不是<span class="test">，我用transform CSS的縮放圖像。

也min-height刪除所有規模的完美工作。

.test { 
-webkit-transform: scale(0.2); 
-moz-transform: scale(0.2); 
-o-transform: scale(0.2); 
transform: scale(0.2); 
}

來源

2013-08-07 10:23:43

自適應縮略圖div，它響應屏幕尺寸

回答

相關問題