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 that you have read and understand our privacy policy and code of conduct.

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