我正在编写一个包含3个宽图像的网站,这些图像需要始终具有100%的宽度.我正在使用媒体查询,我宁愿不必为每张图片制作3份副本以使其合适.
这是我想要的图像上的CSS:
#artwork1 { width: 1500px; height:500px; background-image: url(../img/menupic_1.png); background-repeat:no-repeat; -webkit-background-size: cover; -moz-background-size: cover; -o-background-size: cover; }
这是一个jsfiddle链接:http://jsfiddle.net/RtPEA/.该链接只包含三个< div> s,需要一个调整大小的背景.
我用过背景尺寸:封面;在许多网站上,但在Firefox中,它似乎不适用于这一个.
我也尝试了各种jQuery插件.虽然我确实发现了一些取得了一些成功,但它们并没有在iOS上运行.
解决方法
您需要在前缀版本后添加背景大小:
#artwork1 { width: 1500px; height:500px; background-image: url(../img/menupic_1.png); background-repeat:no-repeat; -webkit-background-size: cover; -moz-background-size: cover; -o-background-size: cover; background-size: cover; }
> http://jsfiddle.net/RtPEA/5/
-moz-background-size
was only supported in Firefox 3.6,其他前缀版本不保证会留下来.
原文地址:https://www.jb51.cc/html/232049.html
版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 dio@foxmail.com 举报,一经查实,本站将立刻删除。