Nano Hash - криптовалюты, майнинг, программирование

Изображение отображается неправильно

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

У меня есть закругленное изображение со свойством border-radius, которое имеет ширину и высоту 50 пикселей. Размер изображения внутри был уменьшен до 30 пикселей, чтобы оно выглядело лучше, и был добавлен padding на 10 пикселей, чтобы в сумме получилось 50 пикселей, не считая границы.

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

CSS

img.userinterface {
  width: 30px;
  height: 30px;
  padding: 10px;
  background: #fff;
  border: 3px solid #ddd;
  border-radius: 50%;}

Базовый html, если вы хотите его проверить:

HTML

<img class="userinterface" src="xyz">
image html padding css
16.07.2016

  • Почему нельзя использовать div? 16.07.2016
  • Он создается с помощью онлайн-конструктора веб-сайтов, и, к сожалению, он не распознает ‹a› как ссылку, если внутри него есть ‹div›. 16.07.2016
  • Этому онлайн-создателю нужно обновление, поскольку в HTML5 якорь/ссылка теперь может иметь div внутри 16.07.2016

Ответы:


1

Зачем лишние img, когда можно сделать ссылку круглой

a {
  display: inline-block;
  width: 30px;
  height: 30px;
  padding: 10px;
  background: #fff url(http://lorempizza.com/100/100/) center center;
  border: 3px solid #ddd;
  border-radius: 50%;
}
a:hover {
  border-color: green;
}
<a href="#"></a>

16.07.2016

2

Если ваша проблема в том, что border-radius не учитывает padding, попробуйте использовать box-sizing: border-box; и посмотрите, влияет ли это на то, как отображается изображение.

16.07.2016
Новые материалы
Кластеризация: более глубокий взгляд
Кластеризация — это метод обучения без учителя, в котором мы пытаемся найти группы в наборе данных на основе некоторых известных или неизвестных свойств, которые могут существовать. Независимо от..
Как написать эффективное резюме
Предложения по дизайну и макету, чтобы представить себя профессионально Вам не позвонили на собеседование после того, как вы несколько раз подали заявку на работу своей мечты? У вас может..
Частный метод Python: улучшение инкапсуляции и безопасности
Введение Python — универсальный и мощный язык программирования, известный своей простотой и удобством использования. Одной из ключевых особенностей, отличающих Python от других языков, является..
Как я автоматизирую тестирование с помощью Jest
Шутка для победы, когда дело касается автоматизации тестирования Одной очень важной частью разработки программного обеспечения является автоматизация тестирования, поскольку она создает..
Работа с векторными символическими архитектурами, часть 4 (искусственный интеллект)
Hyperseed: неконтролируемое обучение с векторными символическими архитектурами (arXiv) Автор: Евгений Осипов , Сачин Кахавала , Диланта Хапутантри , Тимал Кемпития , Дасвин Де Сильва ,..
Понимание расстояния Вассерштейна: мощная метрика в машинном обучении
В обширной области машинного обучения часто возникает необходимость сравнивать и измерять различия между распределениями вероятностей. Традиционные метрики расстояния, такие как евклидово..
Обеспечение масштабируемости LLM: облачный анализ с помощью AWS Fargate и Copilot
В динамичной области искусственного интеллекта все большее распространение получают модели больших языков (LLM). Они жизненно важны для различных приложений, таких как интеллектуальные..