Содержание

Верстка / Верстка круглой картинки

Картинку вставляют через тег img, вот так:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <img src="" alt="">
</body>
</html>

собственно, у него одно главное свойство это src, в которую можно вставить ссылку на любую картинку.

Ссылку в браузере можно получить очень легко, если тыкнуть на любую картинку и выбрать

и дальше скопированное значение вставить в атрибут src

<img src="https://upload.wikimedia.org/wikipedia/commons/thumb/e/e1/Haanja_2010_01_1.jpg/1200px-Haanja_2010_01_1.jpg" alt="">

правда она немедленно займет ровно столько места сколько ей нужно:

поэтому по-хорошему размеры картинок лучше ограничивать используя те же стили. Например, я могу сказать, чтобы высота картинки была ровно 250px

<img src=". .." alt="">

и получится уже так

так как картинка — это обыкновенный блок, то ее можно стилизовать как угодно, например, добавить тень или границу

<img src="https://upload.wikimedia.org/wikipedia/commons/thumb/e/e1/Haanja_2010_01_1.jpg/1200px-Haanja_2010_01_1.jpg" alt="">
<style>
    .main-image {
        height: 250px;
        border: 1px solid silver;
        margin: 8px;
        box-shadow: 0 0 16px silver;
        border-radius: 16px;
    }
</style>

Вообще, чтобы сделать квадратную картинку, в идеале нужно чтобы и исходник был квадратный. Можно конечно попробовать указать свойство width равное height вот так

<style>
    .main-image {
        height: 250px;
        width: 250px;
        border: 1px solid silver;
        margin: 8px;
        box-shadow: 0 0 16px silver;
        border-radius: 16px;
    }
</style>

но тогда у картинки поползут пропорции

в общем самый универсальный способ, которые работает и для квадратных и для прямоугольных картинок – это положить картинку в квадратный блок:

<div> <!-- обернули в блок -->
    <img src="https://upload. wikimedia.org/wikipedia/commons/thumb/e/e1/Haanja_2010_01_1.jpg/1200px-Haanja_2010_01_1.jpg" alt="">
</div>
<style>
    /* в блок перенесли все свойства из main-image */
    .main-image-wrapper {
        width: 250px; 
        height: 250px; 
        border: 1px solid silver;
        margin: 8px;
        box-shadow: 0 0 16px silver;
        border-radius: 16px;
    }
    .main-image {
        height: 100%; /* тут поставили такое свойство, чтобы картинка по высоте равнялась высоте обертки */
    }
</style>

Чет не работает… если присмотреться, то видно, что на заднем фоне появилась квадратная тень, но картинка то все равно не квадратная

Тут проблема в том, что картинка вылазит за границы блока, а блок ее никак не ограничивает.

Чтобы ничего не вылезало, есть волшебное свойство overflow: hidden, которое отключает отрисовку кусков изображений (да и не только изображений), которые вылазят за границы.

<style>
    .main-image-wrapper {
        width: 250px; 
        height: 250px; 
        border: 1px solid silver;
        margin: 8px;
        box-shadow: 0 0 16px silver;
        border-radius: 16px;
        overflow: hidden; /* добавил */
    }
    . main-image {
        height: 100%;
    }
</style>

Чтобы сделать круглую картинку надо чтобы она была квадратная, либо внутри квадратного блока. Это у нас уже готово.

Есть свойство border-radius в котором указывается радиус закругления краев блока. Мы туда пока пихали только пиксельные размер, а если поставить туда значение 50% то радиус закругления будет равен половине стороны квадраты и получится круг, вот так:

<style>
    .main-image-wrapper {
        width: 250px; 
        height: 250px; 
        border: 1px solid silver;
        margin: 8px;
        box-shadow: 0 0 16px silver;
        border-radius: 50%;  /* поставил 50% */
        overflow: hidden; 
    }
    .main-image {
        height: 100%;
    }
</style>

все это можно обернуть во flexы и получить что-нибудь красивое

<div>
    <div>
        <div>
            <img src="..." alt="">
        </div>
        <div>Зима</div>
        <div>близко</div>
    </div>
</div>

вот и вся наука)

В fontawesome есть встроенная поддержка крутящихся иконок, прочитать подробнее можно тут: https://fontawesome. com/how-to-use/on-the-web/styling/animating-icons в общем если хочется добавить крутящуюся иконку то делается это так:

<!DOCTYPE html>
<html lang="en">
<head>
    <!-- ... -->
    <!-- Добавил ссылку на font-awesome, а тож не было -->
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.1/css/all.min.css" />
</head>
<body>
<div>
    <div>
        <div>
            <img src="..." alt="">
        </div>
        <!-- вставил иконку, и добавил к ней класс fa-spin чтобы она крутилась -->
        <div>Зима <i></i></div>
        <div >близко </div>
    </div>
</div>

Как разместить картинки рядом?


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

border
Код

<div>
<a href=»http://ссылка1″><img alt=»123″ border=»o» src=»http://картинка1″ title=»Рис.1″ /></a></div>
<div>
<a href=»http://ссылка2″><img alt=»345″ border=»o» src=»http://картинка2″ title=»Рис.2″ /></a></div>
<div>

<a href=»http://ссылка3″><img alt=»678″ border=»o» src=»http://картинка3″ title=»Рис.3″ /></a></div>

Код казался понятен.  Вместо выделенного красным и синим вставила код картинки из Пикаса. Посмотрела. Стоят мои картинки как рота солдат на плацу, тесно прижавшись друг к другу. Равнение налево. Меня это совсем не устраивает. Хотелось бы чтобы они стояли на расстоянии вытянутой руки и равнение было по центру. Меня слушаться не хотят. Чуть прикоснулась к ним мышкой, так разбежались в разные стороны как по команде «Вольно». Пробовала менять Left  на center или right — никакого результата. Выстраиваются рядышком, но только по вертикали.

Все хотят быть первыми. Долго я их передвигала, это напоминало игру в пятнашки. Результат нулевой. Но все-же я их построила. Не захотели слушать меня, назначим «Лидера». Таким лидером оказалась, как ни банально, картинка под номером один. Поставила ее по центру, благо в Блоггере это не проблема. А последующие номера подводила с правой стороны. Если какая-то картинка задерживалась справа, нажимала на нее и кликала «Выровнять по центру». С тремя картинками проблем особых и не было.

Решила усложнить задачу: поставить 5 картинок, да еще и со ссылками. Как у виджета Linkwithin. Вместо выделенного синим, как и раньше, вставила код подготовленных картинок. А вместо выделенного красным — ссылки на статьи, куда должны вести картинки. Alt и Title тоже прописала. Подправила их мышкой как в предыдущем примере. Результат вполне устраивал.

Все о картинках. Можно почитать.


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


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

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

<div>
<a href=»http://2.bp.blogspot.com/-
Ycmf7RsKWKM/TnsmbAmJfrI/AAAAAAAABBQ/0NrqIcD5o5M/s1600/Kiev2kk.jpg» imageanchor=»1″><img border=»0″ src=»http://2.bp.blogspot.com/-Ycmf7RsKWKM/TnsmbAmJfrI/AAAAAAAABBQ/0NrqIcD5o5M/s320/Kiev2kk.jpg» /></a></div>

Выделенное розовым, ссылку —  не трогаем. А вот со второй половиной (голубой) поработаем.  Все изменения производим на вкладке Изменить HTML. Сначала уменьшим размер картинки. Я хочу поставить 3 картинки в ряд. Учитывая ширину поста и зазоры между картинками, решила что примерная ширина картинки должна быть. А чтобы пропорции изображения остались неизменными, высота. Зная исходный размер картинки, посчитать пропорции несложно или загляните в редактор, где обрабатываете свои изображения. Ну и чтоб уж было все по-правилам, вставляем Alt и Title.  Подправленный код будет выглядеть так:

<div>
<a href=»http://2.bp.blogspot.com/-Ycmf7RsKWKM/TnsmbAmJfrI/AAAAAAAABBQ/0NrqIcD5o5M/s1600/Kiev2kk.jpg» imageanchor=»1″><img  alt=»Киев» border=»0″ src=»http://2.bp.blogspot.com/-Ycmf7RsKWKM/TnsmbAmJfrI/AAAAAAAABBQ/0NrqIcD5o5M/s320/Kiev2kk.jpg»  title=»Как разместить картинки рядом»/></a></div>

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

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

<style type=»text/css»>
   .thumb img {
    border: 2px solid #55c5e9; /* Рамка вокруг фотографии */
    padding: 5px; /* Расстояние от картинки до рамки */
    background: #666; /* Цвет фона */
    margin-right: 10px; /* Отступ справа */
    margin-bottom: 10px; /* Отступ снизу */
   }
  </style>
<div>


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

<style type=»text/css»>
   .thumb img {
    border: 2px solid #55c5e9; /* Рамка вокруг фотографии */
    padding: 5px; /* Расстояние от картинки до рамки */
    background: #666; /* Цвет фона */
    margin-right: 10px; /* Отступ справа */
    margin-bottom: 10px; /* Отступ снизу */
   }
  </style> 
<div>

<div>
<a href=»http://ссылка1″><img alt=»123″ border=»o» src=»http://картинка1″ title=»Рис. 1″ /></a></div>
<div>
<a href=»http://ссылка2″><img alt=»345″ border=»o» src=»http://картинка2″ title=»Рис.2″ /></a></div>
<div>
<a href=»http://ссылка3″><img alt=»678″ border=»o» src=»http://картинка3″ title=»Рис.3″ /></a></div>


Так стали выглядеть наши человечки.

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

Приглашаю Вас присоединиться ко мне в следующих сервисах:

Чтобы автоматически узнавать об обновлениях блога, подпишитесь на  RSS-канал


Понравилась статья? Поделитесь с друзьями.


Как расположить одно изображение поверх другого в HTML/CSS

Иногда вам может понадобиться расположить одно изображение поверх другого. Это легко сделать с помощью HTML и CSS. Для этого вы можете использовать свойства CSS position и z-index.

Сначала мы собираемся показать пример использования свойства position.

  • Используйте
    с именем класса «родительский».
  • Добавьте два элемента со следующими именами классов: «image1» и «image2».

Первое изображение будет фоновым, а второе будет накладываться на него.

 <дел>
  • Добавить относительный элемент div, размещенный в потоке страницы.
  • Установить фоновое изображение как относительное, чтобы элемент div знал, насколько большим он должен быть.
  • Установить наложение как абсолютное, которое будет относиться к верхнему левому краю контейнера div.

Мы размещаем фоновое изображение в начале контейнера, а затем устанавливаем оверлейное изображение так, чтобы оно начиналось через 30 пикселей после фона.

 .родитель {
  положение: родственник;
  сверху: 0;
  слева: 0;
}

. изображение1 {
  положение: родственник;
  сверху: 0;
  слева: 0;
  граница: 1px сплошная #000000;
}

.изображение2 {
  положение: абсолютное;
  верх: 30 пикселей;
  слева: 30 пикселей;
  граница: 1px сплошная #000000;
}

Давайте посмотрим полный пример.

Пример размещения изображения поверх другого с использованием свойства position: 

 

  <голова>
    Название документа
    <стиль>
      .родитель {
        положение: родственник;
        сверху: 0;
        слева: 0;
      }
      .изображение1 {
        положение: родственник;
        сверху: 0;
        слева: 0;
        граница: 1px сплошная #000000;
      }
      .изображение2 {
        положение: абсолютное;
        верх: 30 пикселей;
        слева: 30 пикселей;
        граница: 1px сплошная #000000;
      }
    
  
  <тело>
    <дел>
       jpeg" />