Изображение с гиперссылкой простирается через область просмотра

Question

Я пытался изменить размер div. После этого я отказался от div, поскольку проблема, похоже, не в этом, а в самой гиперссылке. Когда я удаляю гиперссылку, она кажется подходящей. Мне нужно сохранить гиперссылку, изменить размер рамки, чтобы подогнать ее под изображение (потому что мне нужно два изображения в одной строке) и сохранить масштаб внутри div.

Вот скрипка: https://jsfiddle.net/Zvonimir1308/5p2y16w7/26/

a[href $= ".jpg"] {
  margin: 20px;
  border: 1px solid black;
  overflow: hidden;
}

a[href $= ".jpg"] img {
  transition: transform .4s;
}

a[href $= ".jpg"]:hover img {
  transform: scale(1.3);
  transform-origin: 50% 50%;
}

a[href $= ".jpg"] {
  display: flex;
  columns: 2;
  margin: 0 0;
  border-radius: 5px;
}

<div id="#container">
  <a href="https://as.ftcdn.net/r/v1/pics/7b11b8176a3611dbfb25406156a6ef50cd3a5009/home/discover_collections/optimized/image-2019-10-11-11-36-27-681.jpg"><img src="https://as.ftcdn.net/r/v1/pics/7b11b8176a3611dbfb25406156a6ef50cd3a5009/home/discover_collections/optimized/image-2019-10-11-11-36-27-681.jpg"></a>
</div>

Answer 1

Во-первых: ваш идентификатор div должен быть установлен как <div id="container">, нет необходимости вставлять туда #.

Для div по умолчанию display установлено значение block. Итак, после исправления идентификатора div, просто добавьте display: inline-block к div:

#container {
  display: inline-block;
}

Зачем переходить от блока к встроенному блоку? Согласно w3school

По сравнению с display: block основное отличие состоит в том, что display: inline-block не добавляет разрыв строки после элемента, поэтому элемент может сидеть рядом с другими элементами.

Кроме того, если у вас есть вопросы по поводу inline против inline-block против block, я рекомендую прочитать этот ответ .

Final результат:

a[href $= ".jpg"] {
  margin: 20px;
  border: 1px solid black;
  overflow: hidden;
}

a[href $= ".jpg"] img {
  transition: transform .4s;
}

a[href $= ".jpg"]:hover img {
  transform: scale(1.3);
  transform-origin: 50% 50%;
}

a[href $= ".jpg"] {
  display: flex;
  columns: 2;
  margin: 0 0;
  border-radius: 5px;
}

#container {
  display: inline-block;
}

<div id="container">
  <a href="https://as.ftcdn.net/r/v1/pics/7b11b8176a3611dbfb25406156a6ef50cd3a5009/home/discover_collections/optimized/image-2019-10-11-11-36-27-681.jpg"><img src="https://as.ftcdn.net/r/v1/pics/7b11b8176a3611dbfb25406156a6ef50cd3a5009/home/discover_collections/optimized/image-2019-10-11-11-36-27-681.jpg"></a>
</div>