title: How to make an image non-selectable in CSS?
body: <p>I'm making a HTML &amp; CSS website.
  I want to put an image in there which people can not select (or drag).</p>
  <p>Earlier, <code>user-select: none</code> worked on images and texts, but now it doesn't work on images on Chrome&gt;50 and only works on texts.</p>
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-css lang-css prettyprint-override"><code>.text {
    user-select: none;
    font-family: sans-serif;
    letter-spacing: 1.3px;
    line-height: 1.3;
  }
  
  div.image img{
    user-select: none;
    width: 50%
  }</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;body&gt;
        &lt;div class="text"&gt;Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse sed metus efficitur massa placerat auctor faucibus ut mi. Ut sed malesuada felis. Ut varius pharetra orci nec imperdiet. Ut quis nunc elit. Sed scelerisque libero a lacus tempor, eget iaculis augue commodo. Etiam ac elit justo. Nulla pharetra efficitur magna quis gravida. Fusce vulputate lacinia enim ac fermentum. Nullam ac aliquam metus, ac egestas arcu. Cras ac orci finibus purus iaculis mattis quis nec nisl. Proin vehicula eu diam vitae maximus. Quisque ornare a odio a maximus. Donec at nunc fermentum, commodo enim et, finibus libero. Pellentesque ornare ipsum eget ex egestas sagittis.&lt;/div&gt;
        &lt;div class="image"&gt;&lt;img src="https://images.unsplash.com/photo-1599009434802-ca1dd09895e7?ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&amp;ixlib=rb-1.2.1&amp;auto=format&amp;fit=crop&amp;w=750&amp;q=80"&gt;&lt;/div&gt;
      &lt;/body&gt;</code></pre>
  </div>
  </div>
  </p>
  <p>Notice in the above snippet that you cannot select the text, but you can select the image.</p>
  <p><em><strong>How Do I Make The Image Unselectable???</strong></em></p>