使用户无法保存图像

Question

我想保护图像免受普通用户的下载，比如

<div style="background-image: url(img.jpg); background-size: cover; background-repeat: none; ">
<img src="wtrmrk.jpg" style=" opacity: 0; " />
</div>

只要img.jpg的大小未知，如何控制DIV宽度以匹配img.jpg宽度？

Answer 1

对于未知尺寸，我选择了叠加层。您可以创建一个绝对定位的元素，并按top，right，bottom和left属性展开其尺寸，以覆盖图像，如下所示：

< div class =“snippet”data-lang =“js”data-hide =“false”>＆＃13;

＆＃13;

.wrapper { position: relative; display: inline-block; }

.wrapper img { vertical-align: bottom; }

.wrapper:after {
  content: "";
  position: absolute;
  top: 0; bottom: 0; left: 0; right: 0;
  z-index: 1;
}

＆＃13;

<div class="wrapper">
  <img src="http://placehold.it/200"/>
</div>

＆＃13;

＆＃13;