响应式图像链接
我试图使按钮响应并缩放到浏览器大小。
我确实将图像设置为标签上的背景图像，但似乎没有达到预期的效果。我现在使用与以下代码内联的图像。
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/
问题在于它当前的响应能力宽度，但显示整个精灵，因为高度似乎保持不变。
接受其他最佳实践建议
Im trying to make a button responsive and scale to the browser size.
I did set the image as a background image on the tag but didn't seem to be getting the desired effect. I' am now using the image inline with the following code.
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;
}
Live Example
http://www.oatbook.co.uk/preview/
The problem is its currently responsive with the width, but displaying the whole sprite as the height seems to remain the same.
Open to other suggestions of best practise
如果你对这篇内容有疑问，欢迎到本站社区发帖提问 参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。
绑定邮箱获取回复消息
由于您还没有绑定你的真实邮箱，如果其他用户或者作者回复了您的评论，将不能在第一时间通知您！
发布评论
评论（2）
通过在右尖括号前添加斜杠来关闭
![]()
Close the
<img>tag by adding a slash before a closing angle bracket:查看弹性精灵（说明和演示）
此方法允许精灵按比例调整大小，并且不依赖仅在较新的浏览器中支持的
background-size。没有 JavaScript，只有 HTML/CSS。它使用与你的精灵成比例的间隔图像来工作。
Check out Stretchy Sprites (instructions & demo)
This method allows sprites to be resized proportionately, and doesn't rely on
background-sizewhich is only supported in newer browsers. No javascript, just HTML/CSS.It works using a spacer image which is proportionate to your sprite.