Javascript-форум (https://javascript.ru/forum/)
-   Элементы интерфейса (https://javascript.ru/forum/dom-window/)
-   -   растягивание div под загруженую картинку (https://javascript.ru/forum/dom-window/29453-rastyagivanie-div-pod-zagruzhenuyu-kartinku.html)

Alfer 28.06.2012 13:53

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

ksa 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 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 код, и в результате не изменилось :cray:

Deff 28.06.2012 14:27

Alfer,
Если "classDIV" - класс всех div с картинками,
присваивать скриптом данному классу жестко высоту первой картинки( ширина должна быть auto
тогда картинкам css устанавливаем
div.classDIV img{
 height:100%;
 width:auto;
}

ksa 28.06.2012 14:35

Цитата:

Сообщение от Alfer
перед slayder доабавил ваш JS код

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

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

Alfer 28.06.2012 14:44

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

ksa 28.06.2012 15:37

Цитата:

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

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

Deff 28.06.2012 15:49

Цитата:

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

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

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

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

ksa 28.06.2012 16:13

Цитата:

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

Почём я знаю как у него там все сделано? :D
Пока автор писал про проблемы с тем "растягиванием" и спрашивал как это решается на JS.

Цитата:

Сообщение от Deff
Это можно сделать через css

Разумеется. :yes:


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