1

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

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

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/

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

接受其他最佳实践建议

4

2 回答 2

0

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

 <img src="styles/css/images/download.png" />
                                           ^
于 2012-01-15T19:29:31.090 回答
0

查看Stretchy Sprites（说明和演示）

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

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

于 2012-05-31T02:51:52.593 回答