图像大小规则在scss文件中定义时不适用，但在html标签中适用

Question

我是SCSS和前端开发的新手。我在.scss文件中定义了这个简单的规则。

.header-logo {
content: url('/assets/logo/logotype-blue.png'); 
height : 40px; 
}

我的目标是有一个类包含我的头图像，所以我可以使用它在每个头在不同的页面。问题是当我像这样使用这个规则时:

<img class="header-logo" alt="logo"/> 

图像被渲染，但是没有应用height约束。

当我移除这个类，得到这样的东西:

<img src="/assets/logo/logotype-blue.png" height="40" alt="logo"/>

很好地应用了height约束。我有点糊涂了，给我解释一下会很有帮助。

Answer 1

在div元素上试试这样的类，而不是在img标签上。

.sizeMe{
height: 40px;
width: auto;
background-image:  url('/assets/logo/logotype-blue.png');
background-repeat: no-repeat;
background-size: contain;
}