html - 将 img 标签转换为 div 标签给出奇怪的高度结果

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 覆盖图像。

这样，图像(它是您内容的一部分)在 html 中的句法仍然是正确的。

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