Изменение размера фоновых изображений по ширине и высоте при изменении размера окна браузера

Question

Как изменить размер фонового изображения CSS пропорционально при изменении размера окна браузера?

#main {width:950px; height:100%; background:url(image.jpg) no-repeat center bottom}

Когда размеры браузера не должны идти под текст, изображения должны уменьшаться в размере, чтобы сохранить одинаковую позицию и расстояние

Answer 1

Вот как я бы это сделал.

http://jsfiddle.net/DpneL/1/

HTML:

<div id="imgCont">
    <img src="http://lorempixum.com/400/200/" alt="" />
</div>

CSS:

#imgCont {
    margin: 0px auto;
    min-width: 300px;
    max-width: 900px;    
    width: expression(document.body.clientWidth < 302? "300px" : document.body.clientWidth > 902? "900px" : "auto"); /* ie6 */
}

img {
    width: 100%;
}

Answer 2

Пропорционально это не будет правильно, так как вы устанавливаете определенную ширину с процентной высотой.Поэтому попробуйте установить ширину и высоту в соответствующих процентах.

Если вы используете высоту 100%, то это всегда будет идти и под вашим текстом, так что это объясняет, как и до 100%браузер.

Возможно, вам придется поэкспериментировать с настройкой ширины и высоты в качестве значений, таких как 80% и т. Д. Эксперимент!

Answer 3

Я бы предложил использовать этот плагин jQuery http://johnpatrickgiven.com/jquery/background-resize/

Answer 4

@ Jitendra; Да, вы можете использовать background-size свойство для этого, но вместо cover укажите значение в 100%, как это

CSS:

#image{
    -moz-background-size: 100% 50%;
     background:url("image.jpg") no-repeat center bottom;
}

может быть, это работа для вас

Прочитайте эту статью больше: http://webdesign.about.com/od/styleproperties/p/blspbgsize.htm, http://robertnyman.com/css3/background-size/background-size.html

Answer 5

Вы можете использовать CSS background-size. Посмотрите здесь: w3c background-size

Вы, вероятно, после contain или cover.

В качестве альтернативы, вот пример с тегом img: http://jsfiddle.net/jwg2s/ Попробуйте изменить размер вашего браузера.

HTML

<div> 
    Heading text Heading text<br/>
    Heading text Heading text<br/>
    <img src="http://secondnaturearomatics.com/images/pear1.jpg" border="1" alt=""/>
</div>

CSS

div {
    text-align: center;
    background: silver;
    width: 90%;
    font-size: 25px;
}
img {
    width: 50%;
}