Форум

sanhai · #1 (**permalink**) 18.06.2015, 14:31

Помогите пожалуйста. Мне нужно узнать width и height элемента <div>. На сколько я понял через свойства е получится нет у <div> такого свойства.? Что делать

?
Нужно это для того чтобы определив ширину и высоту див изменить размер картинки тега <img>которая будет в нем. Если картинка по своим размерам меньше элемента див то она отражается со своим размером, если картинка больше чем ширина и высота див, то картинка подгоняется под размер див.

рони · #2 (**permalink**) 18.06.2015, 14:57

sanhai,
-getcomputedstyle

Sigizmund2012 · #3 (**permalink**) 18.06.2015, 15:15

Или так:

<div id="wrapper"><img src="#" alt="Image"></div>

<script>
    var div = document.getElementById('wrapper');
    var img = div.querySelector('img');
    if (img.offsetWidth > div.offsetWidth) {
        img.style.width = div.offsetWidth + 'px';
    }
    if (img.offsetHeight > div.offsetHeight) {
        img.style.height = div.offsetHeight + 'px';
    }
</script>

В getComputedStyle() ширина или высота могут иметь значение "auto", а не пиксели.

рони · #4 (**permalink**) 18.06.2015, 15:23

sanhai,
может css без js хватит?

div img{
    max-width: 100%;
    max-height: 100%;
 }

sanhai · #5 (**permalink**) 18.06.2015, 15:49

Спасибо за ответы. Нет css не пойдет если только фаил css (например style_sait_stranica.css) можно было бы как то с помощью php или яваскрипт поменять, например #immm {
width: 100%;
height: 100%;
}
Как ни будь?
Если кого не затруднит вы бы мне в теории описали а скрипт я сам попробую написать. Практика

рони · #6 (**permalink**) 18.06.2015, 16:19

sanhai,

<!DOCTYPE HTML>

<html>

<head>
  <title>Untitled</title>
  <style type="text/css">
  .m {
    background-color: #FF0000;
  }
  body, html {
 width: 100%;
 height: 100%;
 }
  </style>
</head>

<body>
<div class="m" id="immm"></div>
<script>
  document.styleSheets[0].insertRule("#immm { width: 100%; height: 100%;  }", 0);
</script>
</body>

</html>

sanhai · #7 (**permalink**) 18.06.2015, 16:32

Рони большое спасибо за помощь. У меня фаил css в отдельном фаиле. Так бы мне гораздо удобнее было в этот фали скриптом добраться. Шасс буду чего ни будь думать, спасибо

sanhai · #8 (**permalink**) 20.06.2015, 12:45

Рони большое спасибо, все получилось просто через css
max-width: 100%;

max-height: 100%;

serega_dgl · #9 (**permalink**) 13.11.2018, 18:04

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

Как вариант на javascript можно так сделать

<div id="wrapper"><img src="#" alt="Image"></div>

<script>
    var div = document.getElementById('wrapper');
    var img = div.querySelector('img');
    if (img.offsetWidth > div.offsetWidth) {
        img.style.width = div.offsetWidth + 'px';
    }
    if (img.offsetHeight > div.offsetHeight) {
        img.style.height = div.offsetHeight + 'px';
    }
</script>

В getComputedStyle() ширина или высота могут иметь значение "auto", а не пиксели.

может css без js хватит?
1
div img{
2
max-width: 100%;
3
max-height: 100%;
4
}

Форум

Справочник

Discord чат

Курсы javascript