I have an image, and I want to make it both unselectable and undraggable. (Not in an attempt to prevent the user from copying)
I can achieve this by
.noselect
class to the <img>
tag. As suggested here.pointer-events
. (I'm aware that this also disables onclick
, but since I don't need to click on this image, I simply don't care.)body,
html {
background-color: #181A1B;
color: white;
height: 100%;
margin: 0;
padding: 0;
font-family: 'Oxygen', sans-serif;
}
.container {
width: 100%;
height: 100%;
display: flex;
flex-wrap: wrap;
justify-content: center;
align-items: center;
}
.introduction {
display: flex;
flex-wrap: wrap;
justify-content: center;
align-items: center;
}
.introduction p,
h1 {
margin: 0px 0px 0px 10px;
}
.introduction img {
border-radius: 100%;
pointer-events: none;
}
.clearfix {
clear: both;
}
.noselect {
-webkit-touch-callout: none;
/* iOS Safari */
-webkit-user-select: none;
/* Safari */
-khtml-user-select: none;
/* Konqueror HTML */
-moz-user-select: none;
/* Firefox */
-ms-user-select: none;
/* Internet Explorer / Edge */
user-select: none;
/* Non-prefixed version */
}
@font-face {
font-family: 'Oxygen';
src: url('../fonts/oxygen/Oxygen-Regular.ttf');
}
<!DOCTYPE html>
<html>
<head>
<title>Amir A. Shabani</title>
<meta charset="UTF-8">
<link rel="stylesheet" href="styles/style.css" type="text/css">
</head>
<body>
<div class="container">
<div class="introduction">
<img class="noselect" src="https://raw.githubusercontent.com/amirashabani/shabani.xyz/master/images/profile.png" alt="profile picture">
<div class="introduction-text">
<h1 class="noselect">Hi, my name is Amir.</h1>
<p class="noselect">I'm a backend developer and an avid Linux and FOSS enthusiast.<br/>I enjoy programming and developing software that works efficiently.<br/>Currently, I'm studying Software Engineering at the University of Qom, Iran.</p>
</div>
</div>
<div class="clearfix"></div>
</div>
</body>
</html>
Now this works as expected in firefox 69.0-1
, but in google-chrome 77.0.3865.75-1
:
I can't drag the image itself, but if I try to highlight the div that contains the image, then I can drag the image. Same thing in opera 63.0.3368.88-1
:
And just to show that it works it Firefox:
How can I fix this?
I've also used draggable="false"
in my <img>
tag, but same thing occurs.
Just add an empty div over the image with your noselect class on it, it should work pretty cleanly
Edit: or add the image as background image of a div with your noselect class.