当我对 div 进行类并将 css 分配给该类时，它不会做任何事情

Question

对不起，我对编程还比较陌生。我的问题是，我把div归类为.logo，所以当我转到css文件时，我想给gif分配一些不同的维度，正如你在css片段中看到的那样，但问题是它根本不起作用。。。

Html标记

<div class="logo">
<img src="giphy.gif">
</div>

CSS样式

.logo {
width: 333px;
height: 396px;
}

Answer 1

不要像@leelum1建议的那样将类分配给img，只需将元素添加到现有的样式规则中即可。

这是一种更好的方法的原因是，可能需要对当前具有徽标类的div进行其他样式设置，并且与其试图使元素类适合选择器，不如为选择器添加特定性。另外，不要忘记自关闭img元素，并添加一个可访问性的alt标记。

<div class="logo">
<img src="giphy.gif"  alt="logo image" />
</div>
.logo img {
width: 333px;
height: 396px;
}

或者，您可以直接将属性添加到img元素中。这样做的好处是，浏览器将在渲染过程中应用这些维度，因此将在DOM中"保留"具有这些维度的空间。这是语义上更正确的方法。

<div class="logo">
<img src="giphy.gif" width="333" height="396" alt="logo image" />
</div>

Answer 2

这是因为您的img不受div的约束。请尝试将类添加到img中，而不是

.logo {
width: 333px;
height: 396px;
}

<div>
<img class="logo" src="giphy.gif">
</div>