CSS：获取img的宽度

Question

好吧，我的问题很基本：如何获取带有CSS文件的img标签的宽度？

我正在使用标头，它具有and标记。现在，这就是我的CSS中的内容：

.header > img {
    position: absolute;
    left: calc(50vw - 273px);
    z-index: 20;
}

它基本上使用calc()告诉图像它必须在我的标题中的位置，其中第二个参数是img宽度。那么，如何获得img宽度，而不必在那里硬编码一半的大小？

Answer 1

CSS不是编程语言，您不会“获得”宽度。您写入“ left”的内容是相对于容器的，因此在其中写入50％的内容将无济于事。我认为您可以通过以下方式获得正确的结果：

.header > img {
    position: absolute;
    left: 50vw;
    transform: translateX(-50%);
    z-index: 20;
}

另请参阅http://jonrohan.codes/fieldnotes/vertically-center-clipped-image/，尽管它涉及垂直移动图像。

Answer 2

我不知道css或html是否可以做到这一点，但是如果您有图像ID标签，可以使用javascript通过以下代码获取图像宽度。

<script>document.getElementById('whatever your image id').width</script> 

如果将此代码放入html中，请执行

<p><script>document.write(document.getElementById('whatever your image id').width)</script></p>

显示图像宽度。我不确定是否可以将javascript链接到CSS 这样您就不必对CSS中的width值进行硬编码。但是，如果有人找到方法，请告诉我！

谢谢。