我有一个先前已知大小的容器,其中有一个链接,其中包含先前未知大小的图像。图片可以比容器大或小。
我想将图像放入容器中 -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://isstatic.askoverflow.dev/4hPGizOL.jpg" class="image">
</a>
</li>
<li class="image-item">
<a href="#" class="image-link">
<img src="https://isstatic.askoverflow.dev/gYCiAKHI.jpg" class="image">
</a>
</li>
</ul>