Увеличить часть окна

Я загружаю некоторый динамический контент на мою веб-страницу в определенном div, Этот контент будет масштабирован для отображения полностью в divи я хочу, чтобы пользователи могли увеличить это div, Так как это для мобильной версии страницы, боюсь, она будет слишком маленькой. Остальная часть экрана должна остаться без изменений.

HTML:

<div id="container">
   <div id="some_static_part"></div>
   <div id="dynamic_part"></div>
   <div id="some_other_static_part"></div>
</div>

CSS:

#container{
  width:100%;
  height:100%;
}

#some_static_part{
  width:100%;
  height:25%;
}

#dynamic_part{
  width:50%;
  height:75%;
}

#some_other_static_part{
  width:50%;
  height:75%;
}

1 ответ

Это то, что вам поможет. FIDDLE

<div id="sampleDiv" style="width: 100px; background-color: Gray;">
            Zoom Me
        </div>

РЕДАКТИРОВАТЬ: FIDDLE

     <div id="sampleDiv" ondblclick="sampleDiv.style.zoom='300%'" onclick="sampleDiv.style.zoom='100%'" style="width: 100px; background-color: Gray;">
            Zoom
</div>

При двойном щелчке:300% увеличение
По одному щелчку мыши: возврат к настройкам по умолчанию.

Другие вопросы по тегам