Я кодирую сайт, который содержит 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>с которым нужен фон, который изменяет размеры.

я использовалbackground-size:cover; на многих сайтах, но в Firefox он не работает на этом.

Я также пробовал различные jQuery плагины. В то время как я нашел некоторые, которые имели некоторый успех, они не работали на iOS.