响应式图片链接答案

【问题标题】：responsive image links响应式图片链接
【发布时间】：2012-07-28 00:39:41
【问题描述】：

我正在尝试使按钮响应并缩放到浏览器大小。

我确实将图像设置为标签上的背景图像，但似乎没有得到预期的效果。我现在正在使用与以下代码内联的图像。

HTML

<section class="desktop">
    <img class="logo" src="styles/css/images/oatbook.png" title="OATBook | Oral Anticoagulant Therapy">
    <a class="downloada" href="#"><img class="downloadimg" src="styles/css/images/download.png" title="OATBook | Oral Anticoagulant Therapy">sadf</a>
        </section><!-- desktop END -->

CSS

 a.downloada {
    background: aqua;
    max-width: 63%;
    display: block;
    margin: 0 auto;
    margin-top:10px;
    text-indent: -4000px;
    cursor: pointer;
    }
img.downloadimg {
    max-width: 100%;
    display: block;
    text-indent: -4000px;
    cursor: pointer;
    }

现场示例 http://www.oatbook.co.uk/preview/

问题是它当前响应宽度，但显示整个精灵的高度似乎保持不变。

接受其他最佳实践建议

【问题讨论】：

标签： html css responsive-design fluid

【解决方案1】：

通过在右尖括号前添加一个斜杠来关闭<img>标签：

 <img src="styles/css/images/download.png" />
                                           ^

【讨论】：

【解决方案2】：

查看 Stretchy Sprites（说明和演示）

此方法允许按比例调整精灵大小，并且不依赖于仅在较新的浏览器中支持的background-size。没有 javascript，只有 HTML/CSS。

它使用与您的精灵成比例的间隔图像来工作。

【讨论】：