当我对一个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

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

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

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

Answer 2

与其按照@ 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>