1

I have an image blog, where I would like to disable simple right-click image downloads. For this, I have set the images to be a div element's background.

My website is responsive and I added background-size: contain to the div elements, so if they get resized, the background image adopts to the width.

The problem is, that I don't know how to get the div height to adopt to the background image's height so there isn't a whole lot of space under the image when it is resized.

Is it possible to implement using e.g. jQuery?

Try shrinking the div here:

.ui-resizable-helper {
    border: 2px dotted #00F;
}

.resizable {
    background: url('http://www.ancestry.com/wiki/images/archive/a/a9/20100708215937!Example.jpg') no-repeat;
    background-size: contain;
    width: 400px;
    height: 267px;
    border: 2px solid gray;
}
<div class="resizable"></div>

<link href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8/themes/start/jquery-ui.css" rel="stylesheet" />
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.4/jquery.min.js"></script>
<script src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8/jquery-ui.min.js"></script>

<script>
$(function () {
    $(".resizable").resizable({
        animate: true,
    });
});
</script>
Lilferi
  • 49
  • 9
  • You can't size a div to the dimensions of a bg image with CSS- http://stackoverflow.com/questions/3778815/size-the-div-to-the-size-of-the-background-image – Paulie_D Jul 29 '15 at 21:16
  • Yes, and that's why I was wondering if it was possible with javascript. – Lilferi Jul 29 '15 at 21:20

1 Answers1

1

One CSS way to prevent right-click image downloads is to set pointer-events: none on the image: http://jsfiddle.net/h7jeyz6y/. This way, by including an image as part of the div you can control the height of the div via the height of the image, while preventing click events.

img {
    pointer-events: none;
}

Another CSS-only method is to place an invisible screen on top of the image that would capture click events: http://jsfiddle.net/zpsdwkwm/.

.imageHolder:before {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 100;
}
DRD
  • 5,557
  • 14
  • 14
  • Thank you for your help, with the pointer-events solution, the images don't even have to be backgrounds. – Lilferi Jul 29 '15 at 21:22
  • You got it. And for older browsers you can use the "screen" solution using pseudo-elements or, for really old browsers, you can use markup. – DRD Jul 29 '15 at 21:23