Разное

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

23.01.2023

html — Сделать из прямоугольного изображение круглое в css

Задать вопрос

Вопрос задан

Изменён 5 лет 9 месяцев назад

Просмотрен 12k раз

Дано прямоугольное изображение в макете, которое необходимо сделать круглым. Обернул в див, обрезал края, но подвинуть, как на макете, не выходит..Проблема со сдвигом изображение в этом кругу. Может есть фича на Бутстрап какая, мало ли..

.item {
  margin-left: 150px;
}

.photo {
  width: 132px;
  height: 132px;
  margin: 0 auto;
  overflow: hidden;
}

.personPhoto {
  border-radius: 50%;
  width: 100%;
  max-width: 100%;
  height: 100%;
  margin: 0 auto;
}
<article>
  <div>
    <img alt="" src="https://encrypted-tbn0. gstatic.com/images?q=tbn:ANd9GcQvTnQ10XsARegWrtgIwH8LiUMMNeggR5CDtHdVDUPFZwdTA-En">
  </div>
</article>

  • html
  • css
  • bootstrap

2

  1. Закругляем div-обертку, а не изображение
  2. Выставляем width:auto у изображения для сохранения пропорций.
.item {
  margin-left: 150px;
}

.photo {
  width: 132px;
  height: 132px;
  margin: 0 auto;
  overflow: hidden;
  border-radius: 50%;
}

.personPhoto {
  width: auto;
  height: 100%;
  margin: 0 auto;
}
<article>
  <div>
    <img alt="" src="https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcQvTnQ10XsARegWrtgIwH8LiUMMNeggR5CDtHdVDUPFZwdTA-En">
  </div>
</article>

Зарегистрируйтесь или войдите

Регистрация через Google

Регистрация через Facebook

Регистрация через почту

Отправить без регистрации

Почта

Необходима, но никому не показывается

Отправить без регистрации

Почта

Необходима, но никому не показывается

Нажимая на кнопку «Отправить ответ», вы соглашаетесь с нашими пользовательским соглашением, политикой конфиденциальности и политикой о куки

html — Как сделать затемнённое изображение?

Как сделать затемнённое изображение как на фото?

  • html
  • css

1

Это делается на html и css. В css главное для картинки это position:absolute;

Absolute указывает, что элемент абсолютно позиционирован, при этом другие элементы отображаются на веб-странице словно абсолютно позиционированного элемента и нет. Положение элемента задается свойствами left, top, right и bottom, также на положение влияет значение свойства

position родительского элемента.

#outer-box {
  width: 300px;
  height: 194px;
  display: block;
  position: relative;
}

#outer-box img {
  width: 300px;
  height: auto;
}

#outer-box #inner-box {
  background: #FD8698;
  height: 100%;
  width: 100%;
  opacity: 0;
  top: 0;
  left: 0;
  position: absolute;
  padding: 0;
  transition: opacity .5s;
}

#outer-box #inner-box p {
  color: #fff;
  line-height: 150px;
  font-family: 'arial';
  text-align: center;
}

#outer-box:hover #inner-box {
  opacity: .
 
 9;
  transition: opacity .5s;
}
<div>
  <img src="https://img.fonwall.ru/o/5y/eiffel-tower-paris-france-eyfeleva-bashnya-7n74.jpg" />
  <div>
    <p>Почему именно мы?</p>
  </div>
</div>

Это называется overlay

1

С помощью CSS. Подложите под изображение чёрный фон и уменьшайте прозрачность изображения с помощью, к примеру, opacirity: 0.9.

3

Зарегистрируйтесь или войдите

Регистрация через Google

Регистрация через Facebook

Регистрация через почту

Отправить без регистрации

Почта

Необходима, но никому не показывается

Отправить без регистрации

Почта

Необходима, но никому не показывается

Нажимая на кнопку «Отправить ответ», вы соглашаетесь с нашими пользовательским соглашением, политикой конфиденциальности и политикой о куки

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

спросил

Изменено 1 год, 4 месяца назад

Просмотрено 268 раз

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

Я искал вопрос и нашел этот Как сделать круглое изображение в css, и я попытался сделать что-то подобное, но я использовал flexbox.

 

            
    
                
  • 
                    <Ссылка>
                        Дом
                    
                
    • 
                
  • 
                    <Ссылка>
                        Добавить вопрос
                    
                
    • 
                
  •  
    
                    <Ссылка>
                        Таблица лидеров
                    
                
    • 
            

                
    
                    
  • 
                        
    Добро пожаловать, 
    
                    
    • 
                    
  • 
                        
    
                            
                        
    
                    
    • 
                    
  • 
                        
    • 
                
 

        ;
 
 . nav-бар {
    дисплей: гибкий;
    выравнивание элементов: по центру;
    выравнивание содержимого: пробел между;
}
.nav-ссылки {
    дисплей: гибкий;
}
Связь {
    отступ: 10 пикселей;
}
.nav-выход пользователя {
    дисплей: гибкий;
    выравнивание элементов: по центру;
    выравнивание содержимого: пространство вокруг;
}
.выход {
    отступ: 10 пикселей;
}
.аватар {
    ширина: 30 пикселей;
    высота: 30 пикселей;
    радиус границы: 50%;
    переполнение: скрыто;
}
картинка {
    высота: 100%;
    ширина: 100%;
}
  • css
  • флексбокс

2

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

Я только что создал codeandbox с вашим кодом, и он работает без проблем, возможно, проблема связана с другим классом CSS, который объявлен где-то еще, или, может быть, со свойством object-fit на изображении. Я оставлю здесь ссылку на свою песочницу, не стесняйтесь попробовать ее с вашим кодом. Я добавил

объектно-подходящих к стилям изображения.

рабочий пример

 .nav-bar {
    дисплей: гибкий;
    выравнивание элементов: по центру;
    выравнивание содержимого: пробел между;
}
.nav-ссылки {
    дисплей: гибкий;
}
Связь {
    отступ: 10 пикселей;
}
.nav-выход пользователя {
    дисплей: гибкий;
    выравнивание элементов: по центру;
    выравнивание содержимого: пространство вокруг;
}
.выход {
    отступ: 10 пикселей;
}
.аватар {
    ширина: 30 пикселей;
    высота: 30 пикселей;
    радиус границы: 50%;
    переполнение: скрыто;
}
картинка {
    высота: 100 пикселей;
    ширина: 105 пикселей;
    радиус границы: 50%;
} 
 

            
    
                
  • 
                    <Ссылка>
                        Дом
                    
                
    • 
                
  • 
                    <Ссылка>
                        Добавить вопрос
                    
                
    • 
                
  • 
                    <Ссылка>
                        Таблица лидеров
                    
                
    • 
            

                
    
                    
  • 
                        
    Добро пожаловать, 
    
                    
    • 
                    
  • 
                        
    
                             sproutsocial.com/uploads/2015/02/Facebook_Embed.png" alt=''width ="200" />
                        
    
                    
    • 
                    
  • 
                        
    •

Зарегистрируйтесь или войдите в систему

Зарегистрируйтесь с помощью Google

Зарегистрироваться через Facebook

Зарегистрируйтесь, используя электронную почту и пароль

Опубликовать как гость

Электронная почта

Требуется, но не отображается

Опубликовать как гость

Электронная почта

Требуется, но не отображается

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

Улучшить статью

Сохранить статью

  • Уровень сложности: Базовый
  • Последнее обновление: 20 декабря 2020 г.

  • Прочитать
  • Обсудить

    • Улучшить статью

    Сохранить статью

    В этой статье мы создадим закругленное изображение с помощью CSS. Это можно сделать с помощью свойства CSS border-radius . Это свойство в основном используется для изготовления круглых форм. Он содержит числовое значение в виде пикселей.

    Пример 1:

    HTML

    < html >

       

    < head >

         < style >

             img {

                 border-radius: 58%;

             }

         стиль >

    head >

       

    < body >

         < h3 >GeeksForGeeks h3 >

    < H3 >

    Как создать циркуляр/

    0030

             Округленные изображения с помощью CSS?

         h3 >

       

         < img src =

             alt = "GeeksforGeeks logo"  

                 ширина = "200" высота = "160"  

                 border = "5" >

    body >

       

    html >

    Output:

    Example 2:

    HTML

    < html >

       

    < head >

         < style >

             img {

                 радиус границы: 38%;

             }

         стиль >

    head >

       

    < body >

         < h3 >GeeksForGeeks h3 >

    < H3 >

    Как создать циркуляр/

    0030

             Округленные изображения с помощью CSS?

         h3 >

       

         < img src = "img_avatar.

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

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

    © Орфографика.рф, 2010 - 2019
    Расшифровки, размещенные на сайте, предназначены только для личного, некоммерческого использования.
    При перепосте материалов обязательна активная ссылка: «Текст подготовлен компанией Орфографика.рф».
    Вопросы и предложения: info@орфографика.рф.