Question

我试图按下按钮并缩放到浏览器大小。

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

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/

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

向其他最佳实践建议开放

Answer 1

通过在结束尖括号前添加斜杠来关闭<img>标记：

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

Answer 2

查看 Stretchy Sprites （说明和演示）

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

使用与精灵成比例的间隔图像。

响应式图像链接

2 个答案: