如何停止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-eventsis supported in iOS Safari 3.2+。