带有超链接的图像跨越视口

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 id 应该设置为<div id="container">，不需要在里面插入#。

div 默认display 设置为block。所以，固定 div id 后，只需在 div 中添加display: inline-block：

#container {
  display: inline-block;
}

为什么要从块更改为内联块？根据w3school

与 display:block 相比，主要区别在于 display:inline-block 不会在元素后添加换行符，因此该元素可以与其他元素相邻。

另外，如果您对内联、内联块和块有任何疑问，我建议您阅读this answer。

最终结果：

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>