0

Есть фотография. Как её кинуть на фон, чтобы она заполонила всё пространство, но при этом сохранились пропорции?
Спасибо.

5
  • размеры фото какие?
    – Palmervan
    21 янв 2012 в 21:52
  • без разницы
    – blogaster
    21 янв 2012 в 21:53
  • да потише ты... какая разница какое фото? Может я захочу поставить 1256px на 2000px или 500 на 500. Да и решение я нашёл.. при помощи CSS3
    – blogaster
    21 янв 2012 в 22:03
  • 3
    @Palmervan, про потише - хороший совет. Плохое настроение - не повод превращать форум программистов в бутовский подъезд. Алсо, размер для вопроса реально не важен.
    – Sh4dow
    21 янв 2012 в 22:24
  • Было похожее задание не так давно, по ТЗ было сказано что большая картинка должна центрироваться, если размеры экрана меньше размеров картинки.
    – FreeMast
    22 янв 2012 в 4:47

2 ответа 2

2

Могу посоветовать сделать набор картинок под популярные разрешения и вставлять ближайшую javascript'ом. Вообще в самой идее мало хорошего, но если надо - надо решать)

<body id="body">
<script type="text/javascript">
var swidth = [
  1024,
  1280,
  1600,
  1920
];
var imgw = 2560; // по дефолту самое большое
for (var sw in swidth)
  if (screen.width <= swidth[sw]) { // подбираем такое же или большее разрешение
  imgw = swidth[sw];
  break;
  }
document.getElementById('body').style.background = "#fff url('/images/"+imgw+".jpg') 50% 50% no-repeat"; // ставим фон
</script>

Примерно так... Писал здесь, проверка-правка на вас)

1
  • Да, еще это можно решить через такую же подгрузку изображения, только чтобы она ресайзилась на сервере с помощью, например, php+gd и выдавалась в браузер, с кэшированием и прочей оптимизацией, но это вариант с очень грустным качеством картинки, да и времени у меня не особо для таких дел)
    – Sh4dow
    21 янв 2012 в 22:35
1

При увеличении размера картинка с маленьким разрешением будет терять качество. Все зависит только он ее качества и размеров, до которых ты хочешь ее увеличить. Из-за такой "не универсальности" масштабирования принято делать сайты со статическими рамками, что бы одинаково-хорошо смотрелось на широкоформатных экранах

1
  • Я решил эту проблему при помощи CSS3 -moz-background-size:cover; -o-background-size:cover; -webkit-background-size:cover; -khtml-background-size:cover; background-size:cover;
    – blogaster
    21 янв 2012 в 22:35

Ваш ответ

By clicking “Отправить ответ”, you agree to our terms of service and acknowledge you have read our privacy policy.

Всё ещё ищете ответ? Посмотрите другие вопросы с метками или задайте свой вопрос.