Javascript.RU

Создать новую тему Ответ
 
Опции темы Искать в теме
  #1 (permalink)  
Старый 27.02.2012, 18:47
Аватар для swa
swa swa вне форума
Аспирант
Отправить личное сообщение для swa Посмотреть профиль Найти все сообщения от swa
 
Регистрация: 10.04.2009
Сообщений: 50

изменение размеров DIV с картинкой
Использую resizable из UI JQUERY, но не получается оставить картинку в пределах ограничения внешнего DIV

Внутри DIV картинка, при изменении размеров DIV меняю размеры картинки. Однако продолжая тянуть мышкой за пределами ограничений внешнего DIVа картинка все равно увеличивается.

<div id="prim" style="width: 300; height:300">
  <div id="sec" style="width:100; height:100; top:10; left:10">
      <img scr="img.jpg" id="img" width="100" height=100" />
  </div>
</div>


Подскажите, пожалуйста, как исправить?
$("#sec").resizable(({
	containment:"#prim",
	aspectRatio: 16/9,
	resize: function(event, ui){
		$('#sec img').width(ui.size.width);
		$('#sec img').height(ui.size.height);
	}
}));


Эта картинка по-сути background для данного DIV.

Может быть есть возможность менять размеры картинки-подложки, если прописать стили для данного слоя?
Подскажите, пожалуйста как менять размеры картинки background заданной в css?

Последний раз редактировалось swa, 27.02.2012 в 19:18.
Ответить с цитированием
  #2 (permalink)  
Старый 27.02.2012, 19:22
Аватар для swa
swa swa вне форума
Аспирант
Отправить личное сообщение для swa Посмотреть профиль Найти все сообщения от swa
 
Регистрация: 10.04.2009
Сообщений: 50

ПРОСТИТЕ! Ответа не требуется.
Ответ простой до тривиальности!
Без всяких скриптов обычным CSS!

Может быть кому-то из начинающих пригодится.
Масштабирование фоновой картинки в DIV-e:

.myDiv {
	background: url('../img/mypicture.png') no-repeat;
	background-size: cover;
}
Ответить с цитированием
  #3 (permalink)  
Старый 28.02.2012, 09:34
Лаборант :-)
Отправить личное сообщение для Pavel M. Посмотреть профиль Найти все сообщения от Pavel M.
 
Регистрация: 08.11.2011
Сообщений: 806

Сообщение от swa
background-size: cover;
только неплохо бы добавить, что работает это начиная с IE9
http://htmlbook.ru/css/background-size
Ответить с цитированием
  #4 (permalink)  
Старый 03.03.2013, 13:28
Новичок на форуме
Посмотреть профиль Найти все сообщения от Igor0203
 
Регистрация: 07.10.2012
Сообщений: 1

.myDiv {
background: url('../img/mypicture.png') no-repeat;
background-size:100% 100%;
}
Ответить с цитированием
  #5 (permalink)  
Старый 03.03.2013, 13:52
Аватар для danik.js
Профессор
Отправить личное сообщение для danik.js Посмотреть профиль Найти все сообщения от danik.js
 
Регистрация: 11.09.2010
Сообщений: 8,804

.myDiv {
background: url('../img/mypicture.png') no-repeat;
background-size:100% 100%;
-ms-filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(
            src='../img/mypicture.png', sizingMethod='scale');
}


IE8 костыль )
Ответить с цитированием
Ответ



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

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


Похожие темы
Тема Автор Раздел Ответов Последнее сообщение
плавное изменение размеров div dimon76 Элементы интерфейса 9 07.11.2011 13:28
Изменение CCS-свойства DIV по прошествии времени Pug-dog&Elephant Events/DOM/Window 1 31.05.2011 08:10
Динамическое изменение размеров фоновой картинки ячейки shaitan Элементы интерфейса 4 15.04.2010 13:30
Изменение размеров в зависимости от картинки lanzs Элементы интерфейса 9 10.12.2008 21:39
Динамическое изменение размеров изображения Макс Элементы интерфейса 7 21.07.2008 16:55