наследовать ширину изображения (CSS)

0

Я пытаюсь сделать экран, что 80% его заполнено изображением, а нижние 20% - это div. Стиль изображения установлен так, чтобы он масштабировал его по ширине пропорционально высоте. Высота должна заполнять 80% div. Моя проблема в том, что я хочу, чтобы нижний 20% div наследовал автоматически масштабированную ширину изображения. Вот мой css:

<style type="text/css">
    #background {
width: 100%; 
height: 100%; 
position: relative; 
overflow:hidden;
left: 0px; 
top: 0px; 
z-index: -1; /* Ensure div tag stays behind content; -999 might work, too. */
}

.stretch {
max-width:100%;
height:80%;   
}
</style>

И вот HTML:

<div id="background" >
  <img id="status_bg" src="online_pend_off.jpg" class="stretch">
</div>
<div id="twenty_per" style="background-color:blue">
</div>

Любая идея, как я могу сделать второй div (двадцать_per), иметь такую же ширину, как и изображение status_bg? благодаря

Теги:

1 ответ

3

Оберните HTML внутри другого div без ширины по умолчанию (чтобы следовать #background шириной #background), а #twenty_per должен иметь ширину 100%. Таким образом, #twenty_per будет автоматически иметь ту же ширину, что и #background.

CSS

.wrapper {
    display: inline-block;
}

#twenty_per {
    width: 100%;
}

HTML

<div class="wrapper">
    <div id="background" >
        <img id="status_bg" src="online_pend_off.jpg" class="stretch">
    </div>
    <div id="twenty_per" style="background-color:blue"></div>
</div>
Поделиться
  • 0
    Нет смысла во мне дублировать более полный ответ. :-)
  • 0
    Спасибо - это почти идеально, за исключением того, что div "двадцатых_персонала" имеет высоту 0px. Как я могу заставить двадцатое деление заполнить 20% слева от высоты экрана?
Показать ещё 1 комментарий

Ещё вопросы

Сообщество Overcoder
Наверх
Меню