如何防止选择图像的边

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中：

＆＃13;

＆＃13;

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;
}

＆＃13;

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

＆＃13;

＆＃13;

＆＃13;