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

Question

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

但是，一些竖向的图片有很长的隐藏区域，当你在iPhone的Safari中点击图片上的link时，它会显示（突出显示）整个范围图像以及保存和其他选项的菜单。

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

<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 声明图像元素。

它防止图像成为指针的目标（click/tap）。

例如：

a img { pointer-events: none; }

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

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

How to stop Safari on iOS highlight the whole image?

html

css

mobile-safari

responsive-design