Я пытаюсь сделать выпадающее меню с изображением пользователя. однако либо изображение неуместно, когда я использую (1-й случай), либо оно находится в нужном месте, используя только, но не округленное, как я хочу (2-й случай).

https://imgur.com/a/bJPprXH

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

1-й случай:

2-й случай:

<div class="navbar-link">
<img src="image">
</div>

Я хочу, чтобы это раскрывающееся меню было похоже на второе изображение случая, но изображение с закругленной формой

css bulma
2
pedro carara 26 Окт 2019 в 16:06

1 ответ

Может вот так?

<div class="navbar-item has-dropdown is-hoverable">
    <a class="navbar-link">
        <img
           src="https://www.stickpng.com/assets/images/58e91a21eb97430e81906500.png" 
           style= "border-radius: 9001px;"
           alt="Placeholder image"
        >
    </a>
    <div class="navbar-dropdown">
        <a class="navbar-item">
         Jobs
        </a>
    </div>
</div>

https://codepen.io/bluebrown/pen/OJJggMM?editors=1000

3
The Fool 28 Окт 2019 в 08:03

Похожие вопросы

26 Выровнять текст рядом с изображением по вертикали?
30 Как сделать прозрачный фон для текста или изображения с помощью CSS?
14 Как я могу выбрать элемент с несколькими классами в jQuery?
24 Как оформить раскрывающийся список <select> только с помощью CSS?
31 Как автоматически изменить размер изображения, чтобы оно соответствовало контейнеру div?
31 Как вертикально выровнять изображение внутри div
33 Как сделать раскрывающееся меню Twitter Bootstrap при наведении курсора, а не при нажатии
2 Bulma navbar: как оформить меню в раскрывающемся списке?
💵 Получи $100 на хостинг на 60 дней.
Регистрируйся!

Новые вопросы

2 VS Code и мой браузер правильно отображают эту подпись электронной почты, но ни одно из протестированных мной приложений не отображает ее правильно.
2 Есть ли способ добавить две страны рядом друг с другом вместо одной в каждой строке с помощью CSS?
1 Как сделать так, чтобы кнопка поместилась внутри div/cut?
1 Электронная почта в формате HTML не отображается должным образом в Gmail
2 Почему мое модальное окно не отображается на экране, когда я нажимаю на изображение?
1 наведите курсор на элемент с эффектом
1 Столбцы CSS Tailwind не реагируют на мобильных устройствах
2 Изменить размер шрифта в компоненте v-select
1 положение: фиксированное; не работает при использовании фонового фильтра
1 Наблюдатель пересечения: когда элемент находится в поле зрения, счетчик статистики увеличивается, как и должен, но как только он выходит из поля зрения и возвращается к просмотру, счетчик статистики не останавливается.
Все вопросы по теме css >

css

CSS (каскадные таблицы стилей) - это язык таблиц стилей представления, используемый для описания внешнего вида и форматирования документов HTML (язык разметки гипертекста), XML (расширяемый язык разметки) и элементов SVG, включая (но не ограничиваясь) цвета, макет, шрифты, и анимации. Также описывается, как элементы должны отображаться на экране, на бумаге, в речи или на других носителях.

Подробнее про css...