Question

我当然不是CSS大师，但我正在研究一个问题，我想让用户复制图像稍微繁琐。当然，它们仍然可以很容易地被检索，但这使得它不能只是将它们拖放到桌面上。基本上，我有一堆像这样的标记：

<img width="400" src="my image.png" class="foo" alt="foo">

相反，我决定将其放入背景图像并将元素更改为div：

<div width="400" class="foo">

我遇到的问题是图像有一个固定的宽度，但高度可变。当我使用img标签时，这非常好用。当我使用div标签时，它没有相同的行为。相反，CSS要求我强制高度属性显示任何内容：

这不起作用

.foo {
  display: block;
  margin: 0;
  padding: 0;
  width: 400px;
  background-image: url(myimage.png);
  /* height: 200px; */
}

这种方式确实：

.foo {
  display: block;
  margin: 0;
  padding: 0;
  width: 400px;
  background-image: url(myimage.png);
  height: 200px; 
}

问题是如前所述，图像的高度都是可变的。因此，如果我硬编码大小，它会一遍又一遍地重叠。容器可以是超过5,000个图像的占位符，因此手动设置将不会这样做。如果我能让这个div的行为与img标签完全一样，问题就解决了。

Answer 1

如果您只是试图阻止人们点击和拖放，我会说每个img都将div放入position: relative div。在具有以下样式的相对div内添加另一个div.img_box { position: absolute; top: 0; left: 0; width: 100%; height: 100%; background: none; z-index: 9999; /* or anything higher than your img's z-index */ }：

div

这将用透明的{{1}}覆盖图像。

这样，图像（它是你内容的一部分）在html中在语法上仍然是正确的。

当然，每个人都说他们已经通过访问网站将图像下载到他们的计算机上，这当然是正确的。

Answer 2

如果您试图阻止用户轻松重复使用您的内容，一些好的方法是： 1.使用较低分辨率的图像来限制重用潜力 2.为图像添加水印 3.两者的组合，在图像精灵中。

攻击它只会是丑陋，无效和难以维护的。

Answer 3

您只是设置div的背景，而不是将图像添加到div。可以将div调整为不会调整大小为背景图像的大小。只需使用标签。

Answer 4

你唯一能用CSS做的就是增加一个适用于所有图像的高度。因此，如果您的图像高度范围为200-250px，则将div设置为250px。否则，您需要使用javascript或服务器端脚本来确定图像的高度并设置CSS。

将img标记转换为div标记，从而产生奇数高度结果

4 个答案: