Javascript.RU

Создать новую тему Ответ
 
Опции темы Искать в теме
  #1 (permalink)  
Старый 21.04.2018, 13:14
Профессор
Отправить личное сообщение для Igorsrt Посмотреть профиль Найти все сообщения от Igorsrt
 
Регистрация: 21.02.2016
Сообщений: 271

Высота блока в зависимости от background-image
Здравствуйте!
Хочу вывести 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
Аватар для рони
Профессор
Отправить личное сообщение для рони Посмотреть профиль Найти все сообщения от рони
 
Регистрация: 27.05.2010
Сообщений: 33,064

Igorsrt,
если картинка ваша, что мешает узнать высоту картинки заранее и добавить куда нужно?
а так грузите картинку затем измеряйте её высоту и добавляйте в блок.
Ответить с цитированием
  #3 (permalink)  
Старый 21.04.2018, 14:00
Аватар для рони
Профессор
Отправить личное сообщение для рони Посмотреть профиль Найти все сообщения от рони
 
Регистрация: 27.05.2010
Сообщений: 33,064

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>
Ответить с цитированием
  #4 (permalink)  
Старый 21.04.2018, 14:01
Профессор
Отправить личное сообщение для Igorsrt Посмотреть профиль Найти все сообщения от Igorsrt
 
Регистрация: 21.02.2016
Сообщений: 271

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



Опции темы Искать в теме
Искать в теме:

Расширенный поиск


Похожие темы
Тема Автор Раздел Ответов Последнее сообщение
Автоматическая смена картинок через заданное время herotic Элементы интерфейса 45 15.05.2020 16:44
стрелки вниз, верх при раздвижение блоков dima018 Элементы интерфейса 8 12.02.2018 21:29
Помогите с рандомными значениями злобная_пипа Элементы интерфейса 6 02.10.2015 20:11
Изменить высоту фрейма в зависимости от высоты блока в загружаемом документе Sigizmund2012 Элементы интерфейса 18 09.12.2014 18:07
Высота блока в зависимости от высоты браузера andreykor Общие вопросы Javascript 4 23.05.2011 09:56