html - 如何改变图像的宽度和高度？

Question

因此，我正在尝试更改内部包含图像的圈子的 width 和 height，以使其响应。在查询响应能力时，我这样做了:

@media screen and (max-width: 580px) {

  #Equipe .equipe img{
   width: 50px;
   height: 50px;
  }
  ...

.Equipe{
  margin: 0;
  padding: 1px;
  background-color: #ffffff;
  width: 100%;
  height: 100vh;
  overflow-y:hidden;
}

.equipe{
  width: 20%;
  float: left;
  margin: 10px;
  padding: 15px;
  color: #676767;
  border-radius: 15px;
}

.equipe img {
  width: 200px;
  height: 200px;
  border-radius: 50%;
  margin: 80px 20px 30px 0;
  border: 5px solid #46664d;
}
...

我写#Equipe .equipe img 的原因是因为 equipe 它在 div Equipe 中。

<div id="nossa-equipe">
      <div class="Equipe">
          <h8>Equipe</h8>
          <div class="equipe">
            <img src="./img/rodrigo.jpeg">
            <h7>Rodrigo Ferreira/Developer
            </h7>
          </div>
...

但是我的圈子的宽度和高度没有改变。帮忙？

Answer 1

在您发布的 HTML 代码中，我看到 <div class="Equipe"> => Equipe 是一个类，而不是一个 ID。所以它应该用 . 引用在 CSS 中。选择器 #Equipe .equipe img{在媒体查询中应该是.Equipe .equipe img{ .