Автоматическое масштабирование img внутри div
Вложений: 1
Добрый день! Столкнулся с такой проблемой, у меня есть страница, состоящая из левой и правой колонок таблицы. Левая колонка должна занимать 35% экрана, а правая соответственно 65% по ширине, высота должна быть 100%, все должно вписываться в окно браузера без появления прокруток. В левой колонке у меня будет меню, тут проблем нет, а в правой колонке будет меняться фон, который будет состоять из картинок размером 1200 X 1200 px. И меня интересует, как можно вписать изображение в блок (он у меня зеленый на скриншоте) желательно с сохранением пропорций, что бы картинка не растягивалась, и не растягивался сам блок. Уже юзал imagefit плагин, но не помогло. Может, есть какие-то другие варианты? Спасибо.
Вложение 1683
<style type="text/css">
.left_side
{
background-color:black;
width:35%;
}
.right_side
{
background-color:green;
width: 65%;
}
.main_table
{
background-color:black;
}
.main_image
{
width:100%;
height:100%;
}
</style>
<table width="100%" height="100%" cellspacing="0" cellpadding="0" border="0" class="main_table">
<tr>
<td class="left_side" valign="top">
</td>
<td class="right_side" valign="top" align="center">
<div class="main_image">
<img src="/images/route-66-wallpapers_8561_1200x1200.jpg">
</div>
</td>
</tr>
</table>
|