主页 / 问题 / 1594789
Accepted
andreymal
Asked:2024-09-25 00:57:09 +0000 UTC2024-09-25 00:57:09 +0000 UTC

如何使图片链接占据所需的最小面积？

  • 772

我有一个先前已知大小的容器，其中有一个链接，其中包含先前未知大小的图像。图片可以比容器大或小。

我想将图像放入容器中 -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>

css

2 个回答

  1. Best Answer

    我们使用 来将列表项及其所有嵌套元素设置为“不可点击” 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://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>

    • 3

  2. 你可以这样做

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

    或者只是以像素为单位指定并调整到所需的大小

    width="400" height="400"
    • 0

相关问题