Как поднять картинку вверх html
Перейти к содержимому

Как поднять картинку вверх html

  • автор:

Прижать картинку к верху страницы

Как можно в HTML и CSS прижать картинку строго к верху страницы, чтобы она прям прилипала? Имеется такой код:

После этого надо оставить все таким образом, чтобы картинка оставалась по центру.

Отслеживать

задан 8 ноя 2019 в 21:57

11 1 1 серебряный знак 2 2 бронзовых знака

при скролинге, что должно происходить с изображением?

9 ноя 2019 в 8:39

2 ответа 2

Сортировка: Сброс на вариант по умолчанию

* < margin: 0; padding: 0; >.b < display: -webkit-flex; display: -moz-flex; display: -ms-flex; display: -o-flex; display: flex; justify-content: center; >.b img
 

Отслеживать

ответ дан 8 ноя 2019 в 22:13

2,359 1 1 золотой знак 12 12 серебряных знаков 34 34 бронзовых знака

  .top-line

Учтите, что позиционирование position:absolute; отразится на других элементах — они будут вести себя так, словно абсолютно-позиционированного элемента не существует на странице.

Отслеживать

ответ дан 8 ноя 2019 в 23:38

Как переместить изображение вверх в html / css

Я новичок в HTML, и мне хотелось иметь изображение на моей странице, но когда я использую


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

  . my pic   

Я не использую теги и .
Я пытался использовать позицию: relative; top: -10px; , но я не могу понять, как его использовать, или у него есть некоторые проблемы с «float». Коуд, пожалуйста, помогите мне, что делать?
Спасибо заранее и спасибо всем, кто пытался ее решить до сих пор.

Babresepid 25 нояб. 2016, в 04:50
Поделиться

Может быть трудно дать вам ответ только с одной строкой кода. Возможно, создать лучший пример вашей проблемы, используя jsfiddle.net ?

Как вставить картинку в HTML

Как вставить картинку в HTML

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

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

Как добавить картинку и не попасть под суд

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

Хорошим примером нарушения закона об интеллектуальной собственности можно считать историю одного магазина из Перми . Тогда предприниматель решил не нанимать личных фотографов, а взял снимки изделий из интернета, после чего был оштрафован на 820 000 рублей. Естественно, что такие случаи на территории России не столь частые, но лучше соблюдать законы, коль они есть.

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

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

Бесплатные фотографии unsplash

Вот список некоторых сервисов, на которых размещены как бесплатные, так и платные изображения:

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

Год хостинга в подарок при покупке лицензии 1С-Битрикс

Закажите лицензию 1С-Битрикс, легко размещайте картинки в визуальном редакторе и не платите за хостинг весь год.

Комьюнити теперь в Телеграм
Подпишитесь и будьте в курсе последних IT-новостей

Добавляем картинку в HTML

Немного поговорили, теперь давайте приступим к основной части статьи – добавлению изображений в разметку HTML. Как мы уже выяснили ранее, вставить картинку в код и отобразить ее на сайте мы можем с помощью тега . В него по умолчанию входят два атрибута – «src» и «alt». Первый должен содержать в себе путь к изображению, второй – текстовое описание, которое используется поисковыми системами. Если вы не хотите, чтобы фотография индексировалась поисковиками, то не используйте атрибут «alt».

Шаблон: , где photo – папка, размещенная рядом с основным файлом HTML. Если бы изображение было размещено в другом месте, то до него бы полностью указывался путь, например, .

Давайте рассмотрим, как добавить картинку в HTML на примере фотографии из Unsplash:

  1. Скачиваем нужную фотографию из стоков и добавляем ее в папку img, заранее созданную в директории с содержимым сайта. Необязательно создавать новую папку, файл можно разместить рядом с HTML-документом. Если вы берет картинку из другого места, то также учитывайте ее путь.
  2. Прописываем тег и добавляем в него атрибут «src» со скопированным путем. В нашем случае получается просто . При использовании снимка из другой папки, потребовалось бы указать полный путь с обратным слэшем.Как вставить картинку в html
  3. Запустим HTML-файл и убедимся, что все было прописано правильно. В результате фото должно занимать всю область – обратите внимание на ползунки, расположенные справа и снизу. Мы можем их прокрутить, чтобы просмотреть изображение полностью.Как добавить картинку в html

Если при запуске HTML-файла вы не увидели изображения, убедитесь, правильно ли прописан путь, а также название файла. Кроме того, расширение может быть не .jpg, а .png или любое другое.

Для того чтобы изображение не занимало всю площадь, мы можем воспользоваться специальными для этого атрибутами. Например, width — позволяет отрегулировать ширину изображения. Пропорционально ей будет также изменяться высота, которую можно подправить атрибутом height.

Размер указывается как в единицах измерения, так и без; если указать простое число, то оно автоматически определится в пикселях. Также можно указать в em, ex, % и прочих единицах.

Попробуем немного сжать нашу фотографию, чтобы она не расплывалась по всей территории страницы. Для этого пропишем внутри тега атрибут width=”500px”. После этого обновим страницу и убедимся, что изображение было сокращено до размера 500х500(px).

Как изменить размер изображения в html

Это был один из атрибутов, который дал возможность немного поиграться с тегом . Атрибуты позволяют сделать вид страницы наиболее презентабельным и гибким. Значение всегда заключается в двойные кавычки, рекомендуется указывать в нижнем регистре. Существует более 10 различных свойств для изображений, необходимых в разных ситуациях. Далее мы подробно разберем каждый из атрибутов, относящихся к тегу .

Список атрибутов тега img

Использование тегов в HTML-разметке не принуждает использовать лишь один атрибут – при необходимости мы можем воспользоваться их любым количеством. Если используется два одинаковых атрибута, то приоритет будет за тем, что указан первым.

Полный список атрибутов:

  • src — базовый и обязательный, включающий в себя ссылку на изображение. Она может быть прописана как до файла, размещенного на другом веб-ресурсе, так и до изображения, которое находится на домашнем компьютере.

Возможные форматы: JPEG, JPG, PNG, GIF, BMP, ICO, APNG, SVG и Base64.

 или  
  • alt — устанавливается альтернативный текст для изображения. Текстовая информация отображается при отключенной загрузке графики в браузере пользователя и дает понять, что изображено на этой картинке. Помимо этого, данный атрибут также необходим для поисковых систем – таким образом они индексируют изображение и выводят пользователю подходящий результат. Может содержать русскую раскладку.
”яхта
  • align — определяет выравнивание картинки относительно рядом находящегося текста.

Возможные значения: top, bottom, middle, left и right.

  • border — добавляет вокруг картинки рамку с выбранным размером.

Возможные значения: px, % и другие.

  • height – позволяет изменять высоту изображения, пропорционально которому изменяется ширина.

Возможные значения: px, % и другие.

  • width — позволяет изменять ширину изображения, пропорционально которой изменяется высота.

Возможные значения: px, % и другие.

  • hspace — добавляет отступ слева и справа от изображения.

Возможные значения: px, % и другие.

  • vspace — добавляет отступ сверху и снизу от изображения.

Возможные значения: px, % и другие.

  • longdesc — позволяет добавить адрес с расширенным описанием выбранной фотографии.

Возможный формат: txt.

  • crossorigin — разрешает выполнить вставку изображения из другого источника, использовав кросс-доменный запрос.

Возможные значения: anonymous – анонимный запрос без передачи учетных данных, use-credentials – запрос с передачей учетных данных.

  • srcset – добавляет список изображений, которые будут отображаться в зависимости от ширины или плотности экрана. Не поддерживается в браузерах Android и Internet Explorer.

Допустимые значения: Nw, где N – любое целое положительное число, и Kx, где K – положительное десятичное число.

  • sizes — относится к предыдущему атрибуту и позволяет указать размер выбранных изображений.

Возможные значения: Nex, Nrem, Nem, Nvmin, Nch, Nvh, Nvw, Nvmax, Nin, Nq, Nmm, Npc, Ncm, Npt и Npx, где N – положительное число.

Работает следующим образом: при разрешении экрана меньше 800px задается ширина картинки в 500px. Если экран больше 800px, то изображение фиксируется в положении 800px.

  • usemap — позволяет совместить картинку с картой, которая была указана в теге .

Возможные значения: #name, где name – значение атрибута name карты, и #id, где id – значение атрибута id карты.

  • ismap — совмещает фотографию с областью серверной карты. Таким образом, при нажатии считываются координаты клика от левого верхнего угла. Они отправляются запросом на указанный адрес в ссылке. Обязательное требование для работы с атрибутом: картинка должна быть обвернута в тег < a>.

Дополнительные опции

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

  • Изображение как ссылка на другую страницу:
  • Атрибут img позволяет добавлять не просто картинки, но и GIF-изображения:
  • Гибкий тег, появившийся в HTML5 под названием , позволяет изменять картинки при различных расширениях:

При размере дисплея больше 750px будет показано одно изображение, при размере больше 265px, но меньше 750px – другое.

  • Фоновое изображение добавляется в тег body с помощью CSS стиля «background-image» и других подобных:
 

Привет, мир!

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

Как поднять картинку вверх?

joeberetta

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

AppAlex @AppAlex Автор вопроса

Дмитрий, ну не ругайся. Тупанул

5e60f394661bf514645498.png

Решения вопроса 1

lie2

Можно и такой код прописать в div картинки:

НО смотря чего Вы хотите добиться.
Вообще мне хочется предложить её добавить к фону, либо подгрузить к фону.
Тут же можно поработать с index.
Так что опиши свои желания.

Ответ написан более трёх лет назад
AppAlex @AppAlex Автор вопроса

 

Если так, то никаких движений нет

lie2

AppAlex, Есть) там каждый % влияет) вот код в див:
Ответы на вопрос 2

Seasle

5e60f24543625751237086.png

Просто оставлю это здесь.

Ответ написан более трёх лет назад
Комментировать
Нравится 1 Комментировать

ThunderCat

ThunderCat @ThunderCat Куратор тега HTML

5e60f72de9b88516653846.png

AppAlex, У тебя картинка в одном блоке с надписью, которая неверно сверстана (должна вместе с верхней надписью быть в кол-6 и разбита уже там на роу-кол-12). Тогда в правом кол-6 будет твоя картинка, и там уже можно как хочешь нормально позиционировать.

Добавить комментарий

Ваш адрес email не будет опубликован. Обязательные поля помечены *