Javascript-форум (https://javascript.ru/forum/)
-   Элементы интерфейса (https://javascript.ru/forum/dom-window/)
-   -   Высота блока в зависимости от background-image (https://javascript.ru/forum/dom-window/73508-vysota-bloka-v-zavisimosti-ot-background-image.html)

Igorsrt 21.04.2018 13:14
Высота блока в зависимости от background-image
 
Здравствуйте!
Хочу вывести div с фоновым изображением, так что бы высота блока была не меньше этого фонового изображения (можно конечно просто картинкой вставить, но хочется именно через background-image, что бы потом, если что поверх еще что-нибудь вставлять)...
<div id="secondary" class="sidebar" style="background-image: url(test-right.jpg);background-size: contain;">
</div>

рони 21.04.2018 13:46
Igorsrt,
если картинка ваша, что мешает узнать высоту картинки заранее и добавить куда нужно?
а так грузите картинку затем измеряйте её высоту и добавляйте в блок.

рони 21.04.2018 14:00
Igorsrt,
<!DOCTYPE html>

<html>
<head>
  <title>Untitled</title>
  <meta charset="utf-8">
  <style type="text/css">
  .sidebar{
    background-image: url(https://s.poembook.ru/theme/a9/c9/09/8393d39722f905841f4dc46d8c4e7babb1f9e067.jpeg);
    background-size: contain;
    background-repeat: no-repeat;
  }
  </style>
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
  <script>
$(function() {
  var url = "https://s.poembook.ru/theme/a9/c9/09/8393d39722f905841f4dc46d8c4e7babb1f9e067.jpeg";
  var img = new Image;
  img.onload = function() {
  $(".sidebar").height(this.height);
};
  img.src = url;
});
  </script>
</head>

<body>

<div id="secondary" class="sidebar" ></div>

</body>
</html>

Igorsrt 21.04.2018 14:01
предполагается что картинка будет меняться на разных страницах... я понимаю, что средствами css этого не добиться, поэтому и думал что какой-нибудь несложный js скрипт решит проблему


Часовой пояс GMT +3, время: 04:45.