html - Css:获取img的宽度

Question

好吧，我的问题很基本:如何通过我的 css 文件获取 img 标签的宽度？

我正在处理一个 header ，它有一个标签。现在，这就是我的 CSS 中的内容:

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

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

Answer 1

CSS 不是编程语言，您无法“获得”宽度。你写到“left”的东西是相对于container的，写50%也无济于事。我认为您可以获得正确的结果:

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

另见 http://jonrohan.codes/fieldnotes/vertically-center-clipped-image/尽管那是关于垂直移动图像。