Высота блока по фоновой картинке

@DeMark229 · Регистрация: 10.05.2017

Author24 — интернет-сервис помощи студентам

HTML5

1	<div class="background"></div>

как сделать так чтоб не через тег <img>?
ну т.е. блок получает размер картинки и пропорции

CSS

.background{
  background-image: url('https://www.firestock.ru/wp-content/uploads/2014/05/shutterstock_4675252-700x700.jpg');
  background-size: cover;
  background-repeat: no-repeat;
}

@AlexZaw · 28.10.2017, 20:02

Если картинка вставлена через бэкграунд то только задавать размеры блоку или увеличивать его контентом

@DeMark229 · 28.10.2017, 22:30 **[ТС]**

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

если точнее то идет так, то вот картинку сделал
если я зделаю падинг для блока +50% фон зайдет, но вот текст пойдет ниже=\
если я знаю размер блока, то проблем нет... но вот если я не буду задавать размер блока, я могу задать размер по тексту, но вот как сделать по картинке, вот такая вот задачка

https://codepen.io/DeMark229/project/editor/DdPaLW

@Qwerty_Wasd · 28.10.2017, 23:05

DeMark229, предлагаю так. Делайте по тексту, а фон гнать под размер блока. Например

HTML5

<div>Lorem ipsum dolor sit amet consectetur adipisicing elit. Sit ducimus aliquid fuga nesciunt, doloribus facilis voluptates harum esse eveniet fugiat error, quas atque quos dignissimos sapiente molestias tenetur aperiam ipsum. Lorem ipsum dolor sit amet consectetur adipisicing elit. Sit ducimus aliquid fuga nesciunt, doloribus facilis voluptates harum esse eveniet fugiat error, quas atque quos dignissimos sapiente molestias tenetur aperiam ipsum.</div>

CSS

1	div{display:inline-block;width:600px;background:url(https://dummyimage.com/1000x400/03b4e0/000000.png) no-repeat;background-size:100% 100%;}

Песочница

Dmitry · 28.10.2017, 23:35

попался как-то такой финт:

CSS

#site_logo {
    width: 100%;
    height: 0;
    background-image: url(../image/logo.png);
    background-repeat: no-repeat;
    background-size: contain;
    padding-top: 25%;
}

недостаток - нужно четко знать цифру, которая "25%" - это именно соотношение сторон фоновой картинки

@AlexZaw · 29.10.2017, 01:07

Универсального решения нет и быть не может, если динамически могут меняться размеры картинки и/или текста, то в любом случае возникнет ситуация когда либо картинка меньше чем блок с текстом, либо текст меньше чем картинка. Если во втором случае еще можно с помощью php или js получить размер картинки и задать блоку min-height, то когда картинка меньше чем контент, тут уже только не допускать таких ситуаций или отказаться от данного варианта.

А чем не устраивает вариант с img и абсолютным позиционирование блока с текстом поверх блока с картинкой?

@DeMark229 · 30.10.2017, 17:41 **[ТС]**

Qwerty_Wasd, это все понятно, но вот картинка менять пропорции

Добавлено через 1 минуту
AlexZaw, это просто задача)) но как минимум лишний тег в html)
зашла тема с паддингом

@comhunt · 10.05.2020, 19:35

<html>
<style>
.container{background-image:URL(kartinka.jpg);position:relative;background-repeat:no-repeat;}
.container img{height:100%;visibility:hidden;}
.container .content{position:absolute;top:0;left:0;}
</style>
<body>
<div class='container'>
<img src='kartinka.jpg'>
<div class='content'>
Текст
</div>
</div>
</body>
</html>

@AlexZaw Модератор 2338 / 1707 / 666 Регистрация: 07.08.2016 Сообщений: 4,037
	28.10.2017, 20:02	2
	Если картинка вставлена через бэкграунд то только задавать размеры блоку или увеличивать его контентом 0

@DeMark229 8 / 8 / 8 Регистрация: 10.05.2017 Сообщений: 108
	28.10.2017, 22:30 [ТС]	3
	AlexZaw, я это знаю, но если вдруг я захочу поменять картинку, а размер будет другим, и картинка допустим будет меньше, чтото пойдет не так... я думал что можно при загрузке onload на js можно получать размеры картинки, а потом ставить высоту блока если точнее то идет так, то вот картинку сделал если я зделаю падинг для блока +50% фон зайдет, но вот текст пойдет ниже=\ если я знаю размер блока, то проблем нет... но вот если я не буду задавать размер блока, я могу задать размер по тексту, но вот как сделать по картинке, вот такая вот задачка https://codepen.io/DeMark229/project/editor/DdPaLW Миниатюры 0

@AlexZaw Модератор 2338 / 1707 / 666 Регистрация: 07.08.2016 Сообщений: 4,037
	29.10.2017, 01:07	6
	Универсального решения нет и быть не может, если динамически могут меняться размеры картинки и/или текста, то в любом случае возникнет ситуация когда либо картинка меньше чем блок с текстом, либо текст меньше чем картинка. Если во втором случае еще можно с помощью php или js получить размер картинки и задать блоку `min-height`, то когда картинка меньше чем контент, тут уже только не допускать таких ситуаций или отказаться от данного варианта. А чем не устраивает вариант с img и абсолютным позиционирование блока с текстом поверх блока с картинкой? 0

@DeMark229 8 / 8 / 8 Регистрация: 10.05.2017 Сообщений: 108
	30.10.2017, 17:41 [ТС]	7
	Qwerty_Wasd, это все понятно, но вот картинка менять пропорции Добавлено через 1 минуту AlexZaw, это просто задача)) но как минимум лишний тег в html) зашла тема с паддингом 0

@comhunt 0 / 0 / 0 Регистрация: 10.05.2020 Сообщений: 2
	10.05.2020, 19:35	8
	<html> <style> .container{background-image:URL(kartinka.jpg);position:relative;background-repeat:no-repeat;} .container img{height:100%;visibility:hidden;} .container .content{position:absolute;top:0;left:0;} </style> <body> <div class='container'> <img src='kartinka.jpg'> <div class='content'> Текст </div> </div> </body> </html> 0

Высота блока по фоновой картинке

Решение