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

您必须在CSS样式表的常规样式之后的之后插入媒体查询。如果您按照在问题中发布它们的顺序排列它们，则“常规”样式将覆盖移动样式（因为它们遵循移动样式之后并且适用于所有尺寸）。只需将订单转过来...

Answer 2

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

如何更改图像的宽度和高度？

2 个答案: