Форум

Alfer · #1 (**permalink**) 28.06.2012, 13:53

Доброго времени суток, вопрос: есть слайдер, который грузит в себя картинки в DIV, если картинка первая большая по высоте, в следующие картинки маленькие, то под маленькими картинками в загруженный DIV остается много пустого пространства, если же первая идет маленькая, а потом большие, большие просто урезаются, как можно с помощью JS контролировать высоту DIV с его его содержимым?

ksa · #2 (**permalink**) 28.06.2012, 14:13

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

как можно с помощью JS контролировать высоту DIV с его его содержимым?

Как вариант...
Прочитать размер картинки (содержимого) и присвоить нужный размер тому ДИВу...

<!DOCTYPE html>
<html>
<head>
<!--
<script src="http://code.jquery.com/jquery-latest.js"></script>
<link rel="stylesheet" type="text/css" href="tmp.css" />
-->
<style type="text/css">
div {
	border: 1px solid;
}
</style>
<script type="text/javascript">
function test(Obj) {
	var o=Obj.parentNode;
	o.style.height=(Obj.offsetHeight+10)+'px';
	o.style.width=(Obj.offsetWidth+10)+'px';
};
</script>
</head>
<body>
<div>
	<img src='http://javascript.ru/forum/images/ca_serenity/misc/logo.gif' onload='test(this)' />
</div>
</body>
</html>

Alfer · #3 (**permalink**) 28.06.2012, 14:26

ситуация такая:

<div id="slayder">
	<div class="container_12 carousel">
	<div id="slides_two_new">
		<div class="slides_container" >
		
// подключаюсь к базе через SQL запрос
			
<div class="div_slaydes_block" onload='test(this)>
 <div class="description">
// код загрузки картинки через SQL
</div>
	</div>
	</div>
	</div>
	</div>
</div>
</div>

перед slayder доабавил ваш JS код, и в результате не изменилось

Deff · #4 (**permalink**) 28.06.2012, 14:27

Alfer,
Если "classDIV" - класс всех div с картинками,
присваивать скриптом данному классу жестко высоту первой картинки( ширина должна быть auto
тогда картинкам css устанавливаем

div.classDIV img{
 height:100%;
 width:auto;
}

ksa · #5 (**permalink**) 28.06.2012, 14:35

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

перед slayder доабавил ваш JS код

Мой код работает только в том контексте, котором он написан... И onload у меня написан у картинки, а не у какого-то ДИВа...

Т.е. мой вариант это намек на решение твоей проблема, а не собственно решении её.

Alfer · #6 (**permalink**) 28.06.2012, 14:44

ага я понял, просто бъюсь над поиском решения который день, и все без результатно

ksa · #7 (**permalink**) 28.06.2012, 15:37

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

бъюсь над поиском решения который день

Их вобщем-то два:
1. Читать размеры картинки и постраивать верхний див
2. Рамку делать жестко определенного размера, а картинку уже масштабировать и позиционировать

Deff · #8 (**permalink**) 28.06.2012, 15:49

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

. Рамку делать жестко определенного размера, а картинку уже масштабировать и позиционировать

Это можно сделать через css

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

1. Читать размеры картинки и постраивать верхний див

Зачем этому div вообще задавать размер ? безразмерный автоматом подстраивается под картинку

ksa · #9 (**permalink**) 28.06.2012, 16:13

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

Зачем этому div вообще задавать размер ? безразмерный автоматом подстраивается под картинку

Почём я знаю как у него там все сделано?

Пока автор писал про проблемы с тем "растягиванием" и спрашивал как это решается на JS.

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

Это можно сделать через css

Разумеется.

Форум

Справочник

Discord чат

Курсы javascript