0

Cитуация следующая:

<a href="#">
  <img src="#">
</a>

У картинки max-width: 100%, чтобы картинка могла масштабироваться. Ссылка получается адекватной ширины (ширины картинки), но высоты 20px, независимо от размеров изображения. Само изображение остаётся 100% кликабельным, ссылка срабатывает и за пределами этой высоты, но например в хроме outline после клика по такой картинке тоже обладает высотой 20px.

введите сюда описание изображения

Как правильно сделать outline совпадающим с картинкой по размеру? Убивать outline не хотелось бы.

3
  • 1
    Что-то такое a {display: inline-block;} ?
    – Visman
    6 окт 2015 в 13:26
  • Это приводит к тому что он залезает под картинку и остаётся только один его край, если картинка прижата к границам блока. Но уже лучше, чем дефолтное поведение.
    – Denai
    6 окт 2015 в 13:43
  • 1
    поэкспериментируйте с внешним/внутренним отступами.
    – Visman
    6 окт 2015 в 13:45

1 ответ 1

1

a {
  display: inline-block;
  outline: 1px solid red;
}

img {
  display: block;
}
<a>
  <img src=//placehold.it/350x150>
</a>

Ваш ответ

By clicking “Отправить ответ”, you agree to our terms of service and acknowledge you have read our privacy policy.

Всё ещё ищете ответ? Посмотрите другие вопросы с метками или задайте свой вопрос.