Question

我有一个图片博客，我想禁用简单的右键单击图片下载。为此，我将图像设置为div元素的背景。

我的网站响应迅速，我将background-size: contain添加到div元素中，因此如果调整大小，背景图片会采用宽度。

问题是，我不知道如何使div高度采用背景图像的高度，因此在调整大小时图像下面没有足够的空间

是否可以使用例如jQuery的？

尝试缩小div：

＆＃13;

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

＆＃13;

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

＆＃13;

Answer 1

阻止右键单击图片下载的一种CSS方法是在图片上设置pointer-events: none：http://jsfiddle.net/h7jeyz6y/。这样，通过将图像作为div的一部分包含在内，您可以通过图像的高度控制div的高度，同时防止点击事件。

img {
    pointer-events: none;
}

另一种仅限CSS的方法是在图像顶部放置一个不可见的屏幕来捕捉点击事件：http://jsfiddle.net/zpsdwkwm/。

.imageHolder:before {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 100;
}

响应地将div高度调整为背景图像高度

1 个答案: