响应屏幕尺寸的自适应缩略图 div答案

【问题标题】：Adaptive thumbnail div which responsive to screen size响应屏幕尺寸的自适应缩略图 div
【发布时间】：2013-08-09 01:33:33
【问题描述】：

我有一个缩略图列表，当您调整浏览器屏幕大小时，它们都可以很好地适应并保持相同的高度和宽度。

当没有图像时，我需要添加一个带有居中图标的缩略图，但是当我调整浏览器大小时，div 的扩展方式与图像不同。

这是为移动屏幕设计的，但我希望它具有与图像相同的行为。

我在代码中遗漏了什么，我猜测它与高度或边距/百分比值有关？

我有一个演示，其中包含我所做的所有代码：-

http://jsfiddle.net/zM5SG/1/

.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%;
}

任何帮助将非常感谢。

【问题讨论】：

标签： html css mobile responsive-design

【解决方案1】：

我知道这不是最优雅的方式，但你不能用看起来空白的图像替换“空白空间”吗？所以它会像其他图像一样调整大小？

【讨论】：

【解决方案2】：

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);
}

【讨论】：

【解决方案3】：

对于类测试而不是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%;
}

希望这会有所帮助。

【讨论】：