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

Question

У меня есть контейнер заранее известного размера, а в нём ссылка с картинкой заранее неизвестного размера. Картинка может быть как больше, так и меньше контейнера.

Я хочу вписать картинку в контейнер — object-fit: contain с этим прекрасно справляется, но проблема в том, что в пустых местах по краям остаётся кликабельная ссылка, потому что пустота считается частью картинки, а картинка находится внутри ссылки.

Можно ли как-нибудь подшаманить стили так, чтобы площадь ссылки точно совпадала с видимой площадью картинки и никаких кликабельных пустот не было?

В примере ниже пустоты слева и справа от вертикальной картинки не кликаются, потому что я не задал width и картинка не стала растягиваться по горизонтали, а вот пустоты сверху и снизу от горизонтальной картинки кликаются, потому что я прописал height: 100% для растягивания, но как можно растянуть картинку без height и без поломки ссылки, мне не придумалось.

Тупая замена height: 100% на max-height: 100% работает для больших картинок (которые скукоживаются в нужный размер), но не работает для маленьких, потому что у них пропадает повод растягиваться.

.image-list {
  margin: 0;
  list-style: none;
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  justify-content: center;
}

/* Тот самый контейнер заранее известного размера */
.image-item {
  width: 652px;
  height: 652px;
  text-align: center;
  margin: 4px;
  background-color: black;
  border: 4px solid #555;
}

/* Размер картинки в общем случае неизвестен */
.image {
  vertical-align: middle;
  max-width: 100%;
  height: 100%;
  object-fit: contain;
}

<ul class="image-list">
  <li class="image-item">
    <a href="#" class="image-link">
      <img src="https://i.sstatic.net/4hPGizOL.jpg" class="image">
    </a>
  </li>
  <li class="image-item">
    <a href="#" class="image-link">
      <img src="https://i.sstatic.net/gYCiAKHI.jpg" class="image">
    </a>
  </li>
</ul>

Answer 1

можно так

figure img {
 width: 100%; /* Ширина в процентах */
}

или просто указать в пиксилях и подогнать под нужный размер

width="400" height="400"

Answer 2

Задаём пункту списка со всеми вложенными в него элементам "некликабельность" с помощью pointer-events: none , а для картинки возвращаем свойство в исходное состояние - pointer-events: auto . Так как события всплывают, то нажатие по картинке должно передаться и ссылке.

.image-list {
  list-style: none;
  margin: 0;
  display: flex;
  flex-flow: row wrap;
  justify-content: center;
  background-color: black;
}

/* Тот самый контейнер заранее известного размера */
.image-item {
  display: flex;
  justify-content: center;
  align-items: center;
  height: 180px;
  width: 180px;
  box-shadow: 0 0 1px #ff0;
  pointer-events: none;
}

.image-link {
  height: inherit;
  width: inherit;
  display: flex;
  justify-content: center;
  align-items: center;
}

/* Размер картинки в общем случае неизвестен */
.image {
  display: block;
  width: auto;
  height: auto;
  max-width: 100%;
  max-height: 100%;
  object-fit: contain;
  pointer-events: auto;
}

<ul class="image-list">
  <li class="image-item">
    <a href="#" class="image-link">
      <img src="https://i.sstatic.net/4hPGizOL.jpg" class="image">
    </a>
  </li>
  <li class="image-item">
    <a href="#" class="image-link">
      <img src="https://i.sstatic.net/gYCiAKHI.jpg" class="image">
    </a>
  </li>
</ul>

БЛОГ НА HUSL

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

Ответы (2 шт):