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

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 的原因是因为它在 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 样式表中常规样式 之后插入媒体查询。如果您按照在问题中发布它们的顺序排列它们，"regular" 样式将覆盖移动样式（因为它们遵循 after 移动样式并且对所有尺寸都有效).只需扭转订单...

Answer 2

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

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

How to change the width and height of an image?

html

css

media-queries