2

Возможно как-то сделать, чтобы фоновое изображение в блоке div было резиновым, пропорции в процентах не действуют?

6 ответов 6

2

Нормальным людям посвящается!

Приём css3:

div {
width:1500px;
heigth:200px;
background-image: url(/bg.jpg);
background-size:cover;
-moz-background-size:cover;
-webkit-background-size:cover;
}

Что произойдёт?

Браузер запихнёт в такой узко-широкий блок картинку сколь угодно гигантского размера (разумеется,в качестве подложки),так же браузер растянет и масштабирует даже однопиксельную картинку до размеров блока.

ПОЯСНЕНИЕ:

Первые 2-а аттрибута задают размеры блока по ширине=1500 пикселов и высоте=200 пикселов, третий аттрибут-адрес картинки,четвёртый,пятый и шестой аттрибуты-масштабируют картинку по размерам блока div для "w3с-браузеров",для Firefox и для Вебкит-браузеров типа Google Chrome,Apple Safari соответственно.

1
  • Я бы предложил другой порядок правил, а именно: div { width:1500px; heigth:200px; background-image: url(/bg.jpg); -moz-background-size:cover; -webkit-background-size:cover; background-size:cover; } Так надежнее.
    – Astor
    31 окт 2012 в 6:42
2

Можно, но это относится к css3, и не все браузеры это понимают.
background-size.

Чтобы сделать изображение резиновым, подложите под контент изображение:

<div style="height:400px;width:70%;overflow:hidden;position:relative">  
    <img src="img.jpg" alt="" style="position:absolute;left:0;top:0;width:100%;height:100%" />  
    <div style="position:absolute;left:0;top:0;z-index:1;width:100%;height:100%">content</div>  
</div>
1

Если уж использовать имидж как бекграунд, то лучше background-size:contain

4
  • 2
    Чем вам не нравится? Это ответ!
    – sercxjo
    28 ноя 2015 в 22:07
  • @Alex: если считаете ответ плохим — поставьте минус.
    – Nick Volynkin
    30 ноя 2015 в 6:32
  • @NickVolynkin для нас это скорее комментарий чем ответ. точно также как и ответы ниже.
    – Alex
    30 ноя 2015 в 8:11
  • @Alex: ок, понял вас.
    – Nick Volynkin
    30 ноя 2015 в 14:33
0
background-repeat: no-repeat;

? Или что вы имете ввиду под резиновым ?

0

Нормальные люди делают либо изображение, которое можно n-ное количество раз на подложке "повторить", либо яваскриптами получают параметры экрана пользователя, либо кладут div на как подложку и в него уже картинку.

0

Нужно либо изображение вырезать так чтобы можно было замостить им всю площать контейнера, либо сразу сделать большое изображение (например 1920пх) в ширину из расчета на макимальное разрешение поддерживаемое мониторами пк, а еще лучше не делать резиновых изображений потому что вы не знаете какое разрешение будет у пользователя.

Ваш ответ

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

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