Как позиционировать изображение внутри блока div
Имеется блок, и картинка. Как отпозиционировать картинку относительно самого блока, а не всей области сайта.
В дримвивере вставил картинку, присвоил стиль, начал позиционирование. position: absolute. И программа присвоило позиционирование не относительно блока, куда была вставлена картинка, а относительно всего сайта.
Допустим, на примере прикрепленного изображения, как указать, чтобы сверху, справа, снизу, слева был такой то отступ, относительно границ блока block.
В будущем на эту картинку надо будет сделать кнопкой, ну это уже другая история.
Думаю выразился ясно.
Заранее Спасибо!
94731 / 64177 / 26122
Регистрация: 12.04.2006
Сообщений: 116,782
Ответы с готовыми решениями:
Как отменить clear: both внутри определенного div блока
Здравствуйте. У меня такая проблема. Шаблон моего сайта сделан из блочной верстки. Имеется блок.
Размещение нескольких блоков div внутри другого блока div
Хочу сделать шапку веб-страницы. Прикреплю ниже небольшую схему того, как она будет выглядеть. Хочу.
Поведение текста внутри блока DIV
Доброго времени суток форумчане. Не судите строго за возможно глупый вопрос! Суть в следующем. Есть.
Размещение картинки в блоке
В сниппете ниже одна картинка вставляется в блоки разных размеров. CSS свойство background-size: cover; делает так, чтобы фоновая картинка полностью покрывала пространство контейнера (растягивалась или сжималась, соблюдая пропорции картинки). Главный минус в том, что в некоторых случаях не будет видна вся картинка — все зависит от параметров контейнера.
.blockWbg < background-image: url(http://icdn1.digitaltrends.com/image/google-logo-feature-1030x686.jpg); background-repeat: no-repeat; background-size: cover; background-position: center; display: inline-block; >.b1 < height: 200px; width: 100%; >.b2 < height: 100px; width: 200px; >.b3 < height: 200px; width: 100px; >.b4
У свойства background-size: есть еще вариант background-size: contain; . Он делает так, что фоновая картинка вставляется в контейнер так, чтобы полностью в нем помещаться. Но он не всегда удобен, потому что в случаях, когда пропорции контейнера не совпадают с пропорциями картинки, будут пустые места.
Если Вы не против потери пропорций картинки, то вот другой вариант.
Здесь без фона. Картинка растягивается на 100% ширину и высоту заданного блока. Пропорции могут потеряться.
.imgW < border: 1px solid gray; width: 400px; height: 300px; position: relative; >.imgW>img
Позиционирование в CSS
От автора: одним из наиболее полезных инструментов в CSS, на мой взгляд, является позиционирование элементов документа. Под термином «позиционирование» понимается возможность расположить элемент (блок, картинку и др.) в абсолютно любом месте документа.
Полезность этого свойства увеличивается прямо пропорционально сложности макета сайта. В уроке мы детальнее рассмотрим это полезное свойство. Сама же тема урока взята из вопросов, поступивших в нашу службу поддержки в один и тот же день.
Для начала давайте рассмотрим классический пример, где нам потребуется использование позиционирования… к слову, пример этот как раз и взят из одного из упомянутых выше вопросов. Итак, на указанной части шаблона:
мы имеем 2 логические части — шапка и блок меню. При этом оба блока содержат в себе части единой картинки — автомобиля «заезжающего» с шапки на меню. Теоретически здесь мы могли бы обойтись и без позиционирования. Для этого достаточно было бы вырезать картинку шапки и фон меню, при этом на каждой из картинок присутствовала бы своя часть автомобиля:
Но этот вариант далеко не оптимален. Гораздо лучше было бы, если бы у нас имелась отдельно картинка автомобиля, которая совсем не зависела бы от остального потока элементов. В этом случае мы смогли бы «таскать» автомобиль, выбирая для него нужное расположение. Как раз такую возможность нам предоставляет свойство CSS под названием position.
Указанное свойство имеет следующие возможные атрибуты: position: absolute | fixed | relative | static
Относительно атрибута static следует заметить, что его можно не использовать вообще, поскольку изначально это атрибут любого элемента на странице, поэтому если указать для элемента свойство position:static, то абсолютно никаких изменений мы не увидим.
А вот 3 других атрибута — весьма полезны. Для начала давайте укажем описание каждого из них.
— absolute (абсолютный). Указывает, что элемент абсолютно позиционирован. В этом случае он не существует в обычном потоке документа подобно другим элементам, которые отображаются на веб-странице словно абсолютно позиционированного объекта и нет. Положение элемента задается атрибутами left, top, right и bottom относительно края окна браузера.
— fixed (фиксированный). По своим свойствам это значение аналогично аргументу absolute, но в отличие от него привязывается к указанной параметрами left, top, right и bottom точке на экране и не меняет своего положения даже при пролистывании веб-страницы.
— relative (относительный). Положение элемента устанавливается относительно его исходного места. Добавление атрибутов left, top, right и bottom изменяет позицию элемента и сдвигает его в ту или иную сторону от первоначального расположения, в зависимости от применяемого параметра.
Итак, как же мы можем осуществить задуманное. Все просто. Нам известна ширина макета сайта (она фиксирована). Соответственно, все что потребуется — это разместить картинку, к примеру, в шапке и спозиционировать ее относительно шапки. «Сдвигать» картинку мы можем посредством упомянутых атрибутов left (сдвиг от левой границы), top (сдвиг от верхней границы), right (сдвиг от правой границы) и bottom (сдвиг от нижней границы). Во всех четырех случаях границами будут границы элемента, относительно которого осуществляется позиционирование. И вот здесь есть небольшой нюанс, который мы сейчас увидим.
Итак, картинку автомобиля мы вырезали из макета и размещаем ее в шапке:
Как позиционировать картинку в css в блоке div
x
Прошу совета по вёрстке.
Как выровнять картинку внутри дива по центру, если её ширина больше ширины дива?
Свойство для дива срабатывает, только если картинка меньше дива.
Артём Поликарпов
Если такое выпирание картинки действительно уместно ( о чём нужно справиться у дизайнера), в ЦСС для картинки пропишем смещение вправо на 50 % ширины родительского элемента:
.picture img
А уже в разметке сдвинем картинку влево на половину собственной ширины, для этого и нужно правило position:relative:
width=»200″ height=»200″ style hilite»>left: -100px;«> 
Пусть вас не смущают — в данном контексте они уместны и даже незаменимы. Посчитать это смещение при выводе шаблона, зная ширину изображения, не составит труда.
Другой способ решения проблемы — запретить картинке быть больше блока, прописав:
.picture img
Все ухищрения со смещениями в таком случае не нужны — для выравнивания по центру хватит :center у блока .picture.
Это был совет о разработке . Хотите узнать всё об умной вёрстке, правильных скриптах, грациозной деградации, трюках и работе технолога с дизайнером? Присылайте вопросы.