Помогите заставить изображение расширяться и сжиматься при изменении разрешения экрана - PullRequest
Новая
       1

Помогите заставить изображение расширяться и сжиматься при изменении разрешения экрана

1 голос
/ 11 июля 2011

У меня есть изображение полки, которую я хочу расширить и сжать с изменением ширины в разрешении экрана. Концы полки имеют графически оформленные изображения, которые должны остаться на концах. Однако по мере изменения размера экрана я хочу, чтобы центр умещался по всей ширине полки. Я пытался и не могу найти способ сделать это со всеми различными размерами экрана. Вы можете найти пример здесь: http://jsfiddle.net/SndhQ/. В этом примере я изменил изображения на просто цвета, чтобы упростить их.

Вот HTML: 

<div class="shelf">
  <div class="shelfleft"></div>
  <div class="shelfline"></div>
  <div class="shelfright"></div>
</div>

а вот и CSS: 

.shelf{
float: left;
left: 5%;
margin-left: 5%;
margin-right: 5%;
position: absolute;
top: 160px;
width: 79%;
}

.shelfleft{
background: red;
float: left;
height: 35px;
width: 19px;
}

.shelfline{
background: yellow;
float: left;
height: 35px;
margin-right: -10px;
width: 96%;
}

.shelfright{
background: blue;
float: right;
height: 35px;
width: 19px;
}

Любой совет будет принят с благодарностью. Я только кодировал в течение нескольких месяцев. Спасибо.

1 Ответ

1 голос
/ 11 июля 2011

Вот, пожалуйста, сэр: http://jsfiddle.net/tybro0103/SndhQ/2/

Вы были на правильном пути, всего несколько изменений:
1. Вставьте div "shelfright" перед разделителем "shelfline".
2. отбросить поплавок и ширину на полке (элементы div по умолчанию занимают столько ширины, сколько могут)
3. сделать левое и правое поле на полке такими же, как ширина полок на полках и полок на полках

...