Круглые изображения

Как сделать круглые изображения?

Превратить изображения в круг и добавить вокруг них рамку.

Решение

Для скругления уголков у элементов в CSS3 предназначено свойство border-radius , значением которого выступает радиус закругления. Если взять квадратное изображение и добавить к нему это свойство, то мы получим уже не квадратное, а круглое изображение. В качестве значения следует задать половину ширины рисунка. Правда, можно поступить и проще и значением указать заведомо большое число, превышающее размеры изображения. Так мы в любом случае получим круглую картинку и сможем применять стиль к изображениям разного размера.

Плюсом использования border-radius является то, что мы можем добавлять в стилях к элементу рамку, тень и она будет повторять контур. В примере 1 показано создание круглых изображений, для чего вводится класс round , с тенью и рамкой.

Пример 1. Круглые изображения

HTML5 CSS3 IE Cr Op Sa Fx

Результат данного примера в Opera показан на рис. 1.

Рис. 1. Круглые изображения

Браузеры Chrome и Safari некорректно отображают скруглённые уголки, что выглядит довольно некрасиво (рис. 2).

Рис. 2. Рамка в браузере Chrome

Здесь можно посоветовать только отказаться от рамки вообще или заменить border на свойство box-shadow . Вспоминаем, что оно может давать не только размытую тень, но и тень с резкими краями. К тому же box-shadow одновременно допускает наличие нескольких теней, параметры которых перечисляются через запятую. Таким образом, первая тень будет формировать рамку, а вторая добавлять затемнение. В примере 2 показан изменённый стиль, решающий проблему в Chrome с обрамлением.

HTML5 CSS3 IE Cr Op Sa Fx

Результат данного примера показан на рис. 3.

Рис. 3. Рамка в браузере Chrome

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

Источник

How TO — Rounded Images

Learn how to create rounded and circular images with CSS.

How To Create Rounded Images

Step 1) Add HTML:

Example

Step 2) Add CSS:

Use the border-radius property to add rounded corners to an image. 50% will make the image circular:

Example

Go to our CSS Images Tutorial to learn more about how to style images.

COLOR PICKER

Report Error

If you want to report an error, or if you want to make a suggestion, do not hesitate to send us an e-mail:

Thank You For Helping Us!

Your message has been sent to W3Schools.

Top Tutorials

Top References

Top Examples

Get Certified

W3Schools is optimized for learning and training. Examples might be simplified to improve reading and learning. Tutorials, references, and examples are constantly reviewed to avoid errors, but we cannot warrant full correctness of all content. While using W3Schools, you agree to have read and accepted our terms of use, cookie and privacy policy.

Источник

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

В CSS есть проблема с отображением круглого изображения, так как изображения имеют прямоугольную или квадратную форму.

Вы всегда можете использовать графический редактор, например, Gimp или Photoshop чтобы обрезать изображение в виде круга или даже использовать онлайн-инструменты, такие как MockoFun, чтобы обрезать изображение онлайн. Но эта заметка о том, как сделать круглые изображения с помощью CSS.

Итак, как сделать круговое изображение только с помощью CSS?

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

Округленное изображение с использованием CSS свойством border-radius

Самое простое решение для отображения изображения в виде круга с помощью CSS — это использование border-radius . Это свойство используется для создания закругленных границ для элементов HTML, поэтому оно также работает и для изображений.

Чтобы этот метод работал с изображениями любых размеров (в горизонтальной, вертикальной или горизонтальной ориентации), необходимо, чтобы изображение имело родительский HTML-элемент («обертку»). Мы будем использовать элемент span в качестве оболочки с именем CSS-класса circle-image .

 
   
 
И CSS для создания круглого изображения:
 
 .circle-image < display: inline-block; border-radius: 50%; overflow: hidden; width: 50px; height: 50px; >.circle-image img
 
Вот и весь код CSS, который вам нужен для отображения круглого изображения!
 
Автор использовал display: inline-block , потому что элемент span по-умолчанию строчный, и ему нужно менять значение display , чтобы можно было установить размеры.
 
Установка значения border-radius равным 50% на самом деле и создает закругленное изображение с помощью CSS, поскольку оно округляет углы с радиусом 50% (половиной) от всего размера изображения.
 
Для img автор просто использовал 100% для размера, чтобы убедиться, что он плотно прилегает к элементу «обертки». Свойство object-fit: cover обеспечивает сохранение соотношения изображения, чтобы оно не растягивалось.
 
Этот подход довольно прост, но он не лишен неудобств. Например, вы должны указывать размер изображения. В примере автор поставил значение, равное 50px , а вам нужно будет указывать ваш размер.
 
Округленное изображение с использованием CSS свойством background-image
 
По сути, мы используем CSS, чтобы установить наше изображение в качестве фона HTML-элемента и сделать элемент округлым. Таким образом мы получим желаемый результат.
 
и CSS-код, закругляющий наше изображение:
 
Если вам нужно расположить изображение внутри круга нестандартно, вы можете использовать CSS-свойство background-position , чтобы указать левую и верхнюю позиции или комбинации значений: bottom | top | center | left | right .
 
В большинстве случаев описанных решений будет достаточно, но что, если вам нужно сделать адаптивное изображение круга с помощью CSS?
 
Адаптивное закругленное изображение с использованием CSS
 
Нравится нам это или нет, но адаптивный веб-дизайн является важным требованием для веб-сайтов. Давайте посмотрим, что нам нужно изменить в нашем CSS-коде кругового изображения выше, чтобы сделать его адаптивным.
 
HTML-код остается прежним, потому что нам все еще нужен элемент-обертка:
 
 
   
 
и адаптивный CSS-код, закругляющий наше изображение:
 
 .circle-image < display: inline-block; overflow: hidden; width: 33%; padding-bottom: 33%; height: 0; position: relative; >.circle-image img
 
Ну, во-первых, мы установили ширину ( width ) элемента span («обертки») в процентах. Это делает изображение круга адаптивным. Автор использовал значение, равное 33%, поэтому он будет масштабирован до 1/3 контейнера изображения.
 
Мы знаем, что для размещения адаптивных изображений, нужно использовать намного больше CSS, таких как, например, медиа-запросы, но это выходит за рамки этой статьи.
 
Есть один хитрый трюк, чтобы превратить фигуру в квадрат: установка height равной 0 и padding-bottom , равного ширине ( width ) элемента. Это нужно нам для того, чтобы убедиться, что изображение становится кругом, а не сжатым овалом.
 
Этот трюк автор статьи придумал не сам, а нашел здесь .
 
И последнее, что мы установили для элемента «обертки» - правило position: relative . Это связано с тем, что изображение внутри будет иметь position: absolute , и мы хотим, чтобы изображение было позиционировано как абсолютное, относительно элемента обтекания, а не всего документа. Наконец, мы снова установим border-radius равный 50%, но на этот раз для изображения. Это сделает изображение закругленным.
 
 
Закругленное изображение с использованием CSS свойством clip-path
 
Теперь давайте рассмотрим другой способ использования CSS для закругления изображений.
 
CSS-свойство clip-path создает область отсечения, которая определяет, какая часть элемента должна отображаться. Части, которые находятся внутри области, показаны, а те, которые снаружи, скрыты. Одним из значений этого свойства CSS является circle .
 
Таким образом, с помощью этого свойства CSS вы можете обрезать элемент изображения в форме круга с указанным центром и радиусом.
 
 
   
 
А в CSS-коде адаптивного кругового изображения мы заменяем свойство border-radius на clip-path :
 
 .circle-image < display: inline-block; overflow: hidden; width: 33%; padding-bottom: 33%; height: 0; position: relative; >.circle-image img
 
При добавлении свойства clip-path изображение обрезается в виде круга с радиусом, равным половине элемента «обертки».
 
Заключение
 
Мы рассмотрели несколько вариантов создания кругового изображения с помощью CSS. Теперь вы знаете все их «за» и «против». Если у вас есть какие-либо вопросы или замечания, пожалуйста, напишите автору комментарий в конце статьи и он постарается помочь.
 
Если вам понравился этот пост и вы хотите изучить HTML и CSS, автор рекомендует вам в следующий раз прочитать пост « Создание красивых HTML-диаграмм ».
 
Оригинал статьи: CSS Circle Image: “How To” Complete Guide
 
Автор статьи: John Negoita
 
Источник
 
CSS Styling Images
 
Use the border-radius property to create rounded images:
 
 
Example
 
 
Example
 
Thumbnail Images
 
Use the border property to create thumbnail images.
 
 
 
Example
 
img <
border: 1px solid #ddd; 
border-radius: 4px; 
padding: 5px; 
width: 150px;
>
 
 
  
 
Example
 
img <
border: 1px solid #ddd; 
border-radius: 4px; 
padding: 5px; 
width: 150px;
>
 
 
img:hover box-shadow: 0 0 2px 1px rgba(0, 140, 186, 0.5);
>
 
 
 
Responsive Images
 
Responsive images will automatically adjust to fit the size of the screen.
 
Resize the browser window to see the effect:
 
 
 
If you want an image to scale down if it has to, but never scale up to be larger than its original size, add the following:
 
Example
 
Tip: Read more about Responsive Web Design in our CSS RWD Tutorial.
 
Center an Image
 
To center an image, set left and right margin to auto and make it into a block element:
 
 
 
Example
 
Polaroid Images / Cards
 
 
 
Example
 
div.polaroid <
width: 80%; 
background-color: white; 
box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19);
>
 
 
div.container text-align: center; 
padding: 10px 20px;
>
 
Transparent Image
 
The opacity property can take a value from 0.0 - 1.0. The lower value, the more transparent:
 
 
 
 
Example
 
Image Text
 
How to position text in an image:
 
Example
 
 
Image Filters
 
The CSS filter property adds visual effects (like blur and saturation) to an element.
 
Note: The filter property is not supported in Internet Explorer or Edge 12.
 
Example
 
Change the color of all images to black and white (100% gray):
 
Tip: Go to our CSS filter Reference to learn more about CSS filters.
 
Image Hover Overlay
 
Create an overlay effect on hover:
 
Example
 
Example
 
Example
 
Example
 
Example
 
Example
 
Flip an Image
 
Move your mouse over the image:
 
 
 
Example
 
Responsive Image Gallery
 
CSS can be used to create image galleries. This example use media queries to re-arrange the images on different screen sizes. Resize the browser window to see the effect:
 
 
 
 
 
Example
 
.responsive <
padding: 0 6px; 
float: left; 
width: 24.99999%;
>
 
 
@media only screen and (max-width: 700px) .responsive width: 49.99999%; 
margin: 6px 0; 
>
>
 
@media only screen and (max-width: 500px) .responsive width: 100%; 
>
>
 
Tip: Read more about Responsive Web Design in our CSS RWD Tutorial.
 
Image Modal (Advanced)
 
This is an example to demonstrate how CSS and JavaScript can work together.
 
First, use CSS to create a modal window (dialog box), and hide it by default.
 
Then, use a JavaScript to show the modal window and to display the image inside the modal, when a user clicks on the image:
 
 
Example
 
// Get the modal
var modal = document.getElementById('myModal');
 
// Get the image and insert it inside the modal - use its "alt" text as a caption
var img = document.getElementById('myImg');
var modalImg = document.getElementById("img01"); 
var captionText = document.getElementById("caption");
img.onclick = function() modal.style.display = "block"; 
modalImg.src = this.src; 
captionText.innerHTML = this.alt;
>
 
// Get the element that closes the modal
var span = document.getElementsByClassName("close")[0];
 
// When the user clicks on (x), close the modal
span.onclick = function() < 
modal.style.display = "none";
>
 
Источник
 
Читайте также:  Php command line file path