Javascript-форум - отмасштабировать div

Javascript-форум (https://javascript.ru/forum/)

- Общие вопросы Javascript (https://javascript.ru/forum/misc/)

- - отмасштабировать div (https://javascript.ru/forum/misc/29806-otmasshtabirovat-div.html)

отмасштабировать div

Здравствуйте, есть div с разными элементами внутри.. задача стоит в изменении его масштаба, но при попытке задат ь через свойство width все элементы внутри плывут и остаются прежнего размера. можно как то сделать чтобы всё масштабировалсь сразу?

Цитата:

Сообщение от faraday

width все элементы внутри плывут и остаются прежнего размера. можно как то сделать чтобы всё масштабировалсь сразу?

задавать им размеры в относительных единицах сразу- если возможно
если нет проходить по всем и масштабировать их.
А вообще -читать про CSS -что наследуется и что как себя ведёт
javascript не замена css . javascript обладает средствами для взаимодействия с css. поэтому не учить css -не выйдет

в диве находятся только картинки, но при уменьшении размера блока они не масштабируются, а пропадают

faraday,

Цитата:

faraday,
Скорее всего изменяются их координаты, или вы чтото не правильно делаете! Попробуйте как в пред. варианте или
http://www.html.by/archive/index.php/t-16688.html?

Спасибо, попробовал менять масштаб блока через масшта кратинок, но отступы между ними почему-то не изменяются, в чем может быть проблема?
http://visdiv.ru/tizer/

Цитата:

Сообщение от faraday

но отступы между ними почему-то не изменяются, в чем может быть проблема?

Добавьте класс

Цитата:

Пропишите css

Цитата:

все равно масштабирует не верно(

<style>
.item{
float:left;
}
.item img{
width:40%;
height:auto;
}
#main{
padding:30px;
background:green;
}
</style>
<div id ='main'>
<div class="item"><img src="http://visdiv.ru/tizer/tizer.jpg" alt="превью" /></div>
<div class="item"><img src="http://visdiv.ru/tizer/tizer.jpg" alt="превью" /></div>
<div class="item"><img src="http://visdiv.ru/tizer/tizer.jpg" alt="превью" /></div>
<div class="item"><img src="http://visdiv.ru/tizer/tizer.jpg" alt="превью" /></div>
<div class="item"><img src="http://visdiv.ru/tizer/tizer.jpg" alt="превью" /></div>
</div>

<body style="padding-top:45px;">

<style>
td img{
width:50%;
height:auto;
border:4px #fff solid!important;
    border-radius:5px;
    -webkit-border-radius:5px;
    -khtml-border-radius:5px;
    -moz-border-radius:5px;
    -o-border-radius:5px;
    -ms-border-radius:5px;

    box-shadow: 0px 5px 18px #000;
    -webkit-box-shadow:0px 5px 18px #000;
    -khtml-box-shadow:0px 5px 18px #000;
    -moz-box-shadow:0px 5px 18px #000;
    -ms-box-shadow:0px 5px 18px #000;
}
#main{
 width:100%;
}
#main td{
 width:20%;
 padding:30px;
}
.Wrap{
 background:green;
    border-radius:15px;
    -webkit-border-radius:15px;
    -khtml-border-radius:15px;
    -moz-border-radius:15px;
    -o-border-radius:15px;
    -ms-border-radius:15px;
}
</style>
<div class=Wrap>
<table id=main border="0">
 <tr align=center valign=center>
   <td><img src="http://visdiv.ru/tizer/tizer.jpg" alt="превью" />
   </td>
   <td><img src="http://visdiv.ru/tizer/tizer.jpg" alt="превью" />
   </td>
   <td><img src="http://visdiv.ru/tizer/tizer.jpg" alt="превью" />
   </td>
   <td><img src="http://visdiv.ru/tizer/tizer.jpg" alt="превью" />
   </td>
   <td><img src="http://visdiv.ru/tizer/tizer.jpg" alt="превью" />
   </td>
 </tr>
</table>
</div>