Форум

Igorsrt · #1 (**permalink**) 21.04.2018, 13:14

Здравствуйте!
Хочу вывести div с фоновым изображением, так что бы высота блока была не меньше этого фонового изображения (можно конечно просто картинкой вставить, но хочется именно через background-image, что бы потом, если что поверх еще что-нибудь вставлять)...

<div id="secondary" class="sidebar" style="background-image: url(test-right.jpg);background-size: contain;">
</div>

рони · #2 (**permalink**) 21.04.2018, 13:46

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

рони · #3 (**permalink**) 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 · #4 (**permalink**) 21.04.2018, 14:01

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

Форум

Справочник

Discord чат

Курсы javascript