css - 如何防止选择图像的边

Question

下面我有一张图片，后面是文字。如何防止它周围的区域被突出显示？图像本身是不可选择的(使用

-webkit-touch-callout: none; /* iOS Safari */
  -webkit-user-select: none; /* Safari */
  -moz-user-select: none; /* Firefox */
  -ms-user-select: none; /* Internet Explorer/Edge */
  user-select: none;
  pointer-events: none;

) 但图像的周围区域是。我尝试为图像添加左右边距以及使图像成为自己的 div 并将上述代码应用于 div，但它不起作用。 (我把高光设为绿色)

编辑:这是此处链接的另一个示例 https://jsfiddle.net/nnzf4h5c/

Answer 1

您可以将内容包装在具有相同样式的 div 中:

img {
  max-width: 100%;
  height: auto;
}
.cont01 {
  width: 50px;
  -webkit-touch-callout: none; /* iOS Safari */
  -webkit-user-select: none; /* Safari */
  -moz-user-select: none; /* Firefox */
  -ms-user-select: none; /* Internet Explorer/Edge */
  user-select: none;
  pointer-events: none;
}

<div class="cont01"><img src="https://sites.psu.edu/siowfa16/files/2016/10/YeDYzSR-10apkm4.png">
</div>
Text