我如何更改具有相同类但不同div的CSS中的正方形大小？

如何解决我如何更改具有相同类但不同div的CSS中的正方形大小？

如何在CSS中仅更改正方形来更改第二格的图像大小？相同的班级但不同的div？

{{1}}

解决方法

尝试一下

    .square {
      width: 300px; /*standard image size*/
    }

    .square.square--small {
      width: 150px; /*small image size*/
    }

    .square.square--small .square__image { /*apply change only to small img*/
      width: 100%;
      height: auto;
    }

,

您好，您可以使用以下CSS选择器：

.square img
{
   width:100px;
   height:100px
}
.square.square--small img{
   width:50px;
   height:50px
}

,

通过将其div设置为max-width，将100%设置为max-height，使图像不与100%重叠 和height到auto像这样：

max-width: 100%;
max-height: 100%;
height: auto;

然后为您的除法元素设置样式，例如：

  .square {
            width: 300px;
            height: 300px;
            margin: 30px;
        }

  .square.square--small {
            width: 200px;
            height: 300px;
        }

同样，宽度和高度仅用于演示，可以根据需要进行修改。

,

img of working code

<div class="square">
  <img class="square__img" src="square.png" alt="img1">
</div>
<div class="square square--small">
  <img alt="img2" class="square__image" src="square.png">
</div>

.square {
  border: 1px solid red;
  height: 200px;
  width: 200px;
  margin-bottom: 20px;
  text-align: center;
  display: flex;
  align-items: center;
  justify-content: center;
  float: left;
  margin-right: 20px;
}
.square img {
  width: 100px;
  border: 1px solid green;
  display: inline-block;
  height: 100px;
}
.square--small {
  border: 1px solid black;
}
.square--small img {
  border: 1px solid red;
  height: 150px;
  width: 150px;
}