Как задать положение картинки в html

 src="image.jpg" style="position: relative; left: 20px;" /> 

 .logo  transform: translateX(100px); >  

"photo" style="position:absolute;left:100px;right:100px" width=100 height=100>

обьект

обьект

, а все дивы в ещё один

 .abra .pop 
 
 
 
 
 
 

или вы уже про другую тему?)
не очень понятна суть в картинке

Всё написанное мной является лично моим мнением за исключением когда указан источник данных.
Последний раз редактировалось JinglsOrg; 08.02.2011 в 21:36 .
Регистрация: 18.01.2011
Сообщений: 2
Сообщение от JinglsOrg

быть может вам поможет

Спасибо, но.
мне не помогает. Кнопку приходиться подгонять по всему сайту а не по месту где находиться код. И из этого следуют минусы: новости разные по длине, и сделать кнопки сразу после новости не получается. И еще минус — при изменении масштаба страницы кнопки плывут, меняют свою начальную позицию.

ConsTantiNsh

Посмотреть профиль

Найти ещё сообщения от ConsTantiNsh

Форумчанин
Регистрация: 27.04.2010
Сообщений: 185
Сообщение от ConsTantiNsh

Спасибо, но.
мне не помогает. Кнопку приходиться подгонять по всему сайту а не по месту где находиться код. И из этого следуют минусы: новости разные по длине, и сделать кнопки сразу после новости не получается. И еще минус — при изменении масштаба страницы кнопки плывут, меняют свою начальную позицию.

Указывайте смещение элемента с этим свойством, считая точкой отсчета предыдущий элемент

Помог — тырк на весы
Регистрация: 28.09.2010
Сообщений: 5
Сообщение от JinglsOrg

А засуньте ка картинки в

или вы уже про другую тему?)
не очень понятна суть в картинке

суть в том, что надо сделать две вещи котрые у меня еще не получились в идеале!
1) три антенки надо прикрепить так, чтобы они при увеличении текста, всеравно были с низу. как на ресунке

Но он не прилегает к самому краю (((
2) как сделать стольже красивую тень как на ресунке, но css !!

Размеры и позиционирование изображений на веб-страницах

Вспомним, что для добавления файлов изображений на веб-страницу используется одиночный тег с атрибутами:

Атрибуты ширины и высоты можно опустить, если размер задается с помощью одноименных свойств CSS.

Если картинка больше ширины блока, в котором размещается, она будет выходить за пределы этого блока.

Однако ширину можно выражать в процентах. При этом она вычисляется от размера родительского блока. В таком случае изображение будет расширяться и сжиматься, подстраиваясь под разные экраны. При расширении потери качества не произойдет, так как реальный размер картинки все-равно больше.

img src="linuxhistory.png"  alt="История Linux"  width="100%" height="auto">

Значение auto для height заставляет высоту изображения масштабироваться пропорционально ширине.

То же самое через css-правило:

img { width: 100%; height: auto; } … img src="linuxhistory.png" alt="История Linux">

Или встроенный в элемент стиль:

img src="linuxhistory.png" alt="История Linux" style="width:100%;height:auto">

Проблема возникает, когда картинка меньше ширины родительского блока на больших экранах, однако на малых – наоборот, не помещается в него. В таком случае если мы оставим размер изображения в пикселях, то все будет хорошо на условных мониторах, но плохо на условных смартфонах.

Если же выразим ширину в процентах, то решим проблему на мобильных устройствах. Однако на десктопах получим ухудшение качества изображения, так как оно растянется больше своего оригинального размера.

Наиболее простым способом решения проблемы является использование css-свойства max-width со значением в процентах и с одновременным указанием размера изображения в пикселях в атрибутах элемента img .

В этом случае max-width растягивает картинку на всю ширину внешнего блока при условии, что размер этого блока не превышает размера изображения. Когда это не так, срабатывают значения атрибутов длины и ширины тега.

Ранее (см. урок 3), когда речь шла о блочных и строчных элементах, то для выравнивая отдельно стоящего изображения по центру приводился пример помещения его в блок div или figure . Однако мы можем сделать само изображение блочным элементом с помощью объявления display: block . После этого центрировать его с помощью margin: auto .

img { display: block; margin: 0 auto; max-width: 100%; height: auto; } … img src="gnu.png" alt="Логотип GNU" width="491" height="480">

Бывает, что маленькие картинки предпочитают обтекать текстом слева или справа. Для этого используют свойство float со значением left или right . В случае float: left элемент будет «уплывать» налево. Другие элементы будут оказываться справа от него.

Здесь может потребоваться решать две проблемы:

1. Бывает необходимо, чтобы только конкретный абзац обтекал изображение.
2. На узких экранах обтекание должно смениться на расположение картинки и текста друг под другом. Иначе получается слишком мало места для текста сбоку от изображения, и верстка выглядит плохо.

Первая проблема решается с помощью свойства clear . В примере на скрине выше допустим мы не хотим, чтобы второй абзац обтекал символ копилефта. Следовательно, очищать обтекание мы должны у него.

p style="clear:left;">Самым известным …/p>

Объявление clear: left заставляет элемент перестать обтекать объекты, расположенные с левой стороны. Вариант clear: both – с обоих сторон. В нашем примере значение both дало бы тот же результат.

Чтобы убрать обтекание изображений на малых экранах, потребуется использовать @media-запрос, в котором значения свойств будут меняться. Однако если мы до этого оформляли элемент через атрибут style тега, то такой inline-стиль (строчный) имеет приоритет над внешней или внутренней таблицей стилей.

Поэтому в нашем случае понадобится использовать команду !impotant :

@media (max-width: 599px) { img { float: none!important; padding: 0!important; display: block; margin: 0 auto; max-width: 100%; height: auto; } }

Когда на странице несколько изображений оформляются по-разному, то inline-стили могут выглядеть предпочтительными. Если же можно выделить несколько групп изображений, каждая из которых стилизуется по-своему, следует задуматься об использовании классов.

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

X Скрыть Наверх

Введение в веб-разработку и создание сайтов

Как задать положение картинки внутри другой картинки? CSS, HTML

Добрый день. Начинаю учить веб-разработку и решил написать простенький сайт. В общем, нужно вставить изображение внутрь другого изображения (рамки). Игрался с абсолютным позиционированием, но ничего хорошего не вышло, гуглил — тоже ничего не нашел. Надеюсь на вашу помощь, заранее спасибо.

94731 / 64177 / 26122
Регистрация: 12.04.2006
Сообщений: 116,782
Ответы с готовыми решениями:

Как задать дополнительный отступ для картинки внутри div?
Здравствуйте. Есть такой код: .big_arrow2 < display: block; background: #f7f7f7.

Как в мобильной версии сайта через css задать размер картинки
Добрый вечер. Помогите пожалуйста. сайт https://airkolors.com/10-clever-lighting-design-ideas как в.

вставка картинки в HTML и CSS
Здравствуйте,дайте пожалуйста совет,как поставить картинку которую сделал через "онлайн-создание.

Текст и картинки по центру css/html
Всем привет ни как не могу полосочки и текст сделать по центру.. их можно прижать либо в лево.

Регистрация: 19.12.2017
Сообщений: 166

Вы рамке задавали position: relative? Если задать, тогда картинке с горами получится задать position: absolute.

Регистрация: 05.06.2016
Сообщений: 10

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

Вы рамке задавали position: relative? Если задать, тогда картинке с горами получится задать position: absolute.

задавал. Не помогает. Больше скажу: Картинка не то что не накладывается на рамку, а находится рядом с ней, так еще и не меняет свое положение, когда я перемещаю рамку. Словом, как будто никаких позиционирований и не выставлено.

Добавлено через 9 минут
я лучше покажу Вам мой основной html и css файлы и конкретную задачу. Нужно, чтобы картинка оказалась внутри ноутбука (я взял в пример рамку, чтобы было проще). Видел такое на многих сайтах (там эти картинки еще менялись с различными эффектами).

Регистрация: 19.12.2017
Сообщений: 166

Попробуйте картинку с рамкой задать фоном (background-image), тогда картинку с горами можно будет спозиционировать даже без position.

Регистрация: 05.06.2016
Сообщений: 10

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

Попробуйте картинку с рамкой задать фоном (background-image), тогда картинку с горами можно будет спозиционировать даже без position.

Извиняюсь, задать фоном к какому элементу? Просто если создать пустой div и прописать для него background-image, то ничего не произойдет, пока div не наполнить текстом. После этого фон будет ровно по высоте контента. Размеры этого фона я также не могу задать. Если сделать Макбук фоном для картинки с горами, то фона не видно. Снизу скрины;

p.s. Вот сайт популярного дистрибутива, там сделано примерно как мне надо https://elementary.io/ru/ (там ноут и картинка — это одно изображение, но оно вставлено в фон). Код элемента я открывал, смотрел, но у самого так не получилось.

Регистрация: 19.12.2017
Сообщений: 166

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

Извиняюсь, задать фоном к какому элементу? Просто если создать пустой div и прописать для него background-image, то ничего не произойдет, пока div не наполнить текстом. После этого фон будет ровно по высоте контента. Размеры этого фона я также не могу задать. Если сделать Макбук фоном для картинки с горами, то фона не видно. Снизу скрины;

p.s. Вот сайт популярного дистрибутива, там сделано примерно как мне надо https://elementary.io/ru/ (там ноут и картинка — это одно изображение, но оно вставлено в фон). Код элемента я открывал, смотрел, но у самого так не получилось.

Как бы я делал: создаём пустой div. Задаём ему фиксированную высоту, равной высоте картинке с рамкой, или больше. Для пустого дива фоном вставляю картинку с рамкой в css. Позиционирую её (no-repeat, center, всё остальное подскажет гугл). Затем, в html коде, прописываю картинку с горами. И двигаю её относительно рамки с помощью margin: 0 auto, и марджинов слева-справа. Можно двигать и с помощью position, только диву нужно задать relative, а картинке с горами absolute.