css - 如何在 iOS 上停止 Safari 突出显示整个图像？

Question

为了在网站上有响应式图像，我使用 overflow: hidden图像容器上的样式，以及与最大高度和自动宽度相关的其他规则，因此对于给定的屏幕宽度，图像在可见区域上具有相同的比例，几乎不管图像本身是什么。它适用于风景图像。

然而，一些纵向图像有很长的隐藏区域，当你在 iPhone 的 Safari 中点击图像上的链接时，除了保存和其他选项菜单外，它会显示(突出显示)图像的整个范围。

使用的标记大致是这样的:

<figure>
  <div class="image-wrapper">
    <a href="...">
      <img src="http://lorempixel.com/200/400/">
    </a>
  </div>
</figure>

样式(摘录，没有宽度且无关):

a {
   max-width: 900px;
   max-height: 120px;
   overflow: hidden;
   display: block;
}
div {
   max-width: 900px;
   position: relative;
   overflow: hidden;
   max-height: 120px;
}
img {
   width: 100%;
}

一开始我以为是因为<a>填充 <img> , 所以我添加了 display: block和 max-height , 但它没有帮助。这意味着，点击菜单是针对图像的，而完整的图像是高亮显示的。

有没有办法在点击高亮时只显示可见部分？

Answer 1

一种选择是给出 pointer-events: none声明图像元素。

它防止图像成为指针的目标(点击/点击)。

例如:

a img { pointer-events: none; }

值得注意的是 pointer-events is supported in iOS Safari 3.2+ .