Comment empêcher la sélection des côtés d'une image

Question

Ci-dessous, j'ai une image suivie d'un texte. Comment puis-je empêcher la mise en évidence de la zone qui l'entoure? L'image elle-même n'est pas sélectionnable (en utilisant

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

) mais la zone environnante de l'image est. J'ai essayé d'ajouter des marges gauche et droite à l'image ainsi que de faire de l'image son propre div et d'appliquer le code ci-dessus à la div, mais cela ne fonctionne pas. (J'ai fait le vert en surbrillance)

Modifier: Voici un autre exemple lié ici https://jsfiddle.net/nnzf4h5c/

Answer 1

Vous pouvez envelopper le contenu dans un div avec le même style:

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