как я могу изменить размер квадрата в CSS с тем же классом, но другим div?

#html #css

#HTML #css

Вопрос:

Как я могу изменить размер изображения второго div в CSS, изменив только квадрат? с тем же классом, но другим div?

 <div class="square"> <img class="square__img" src="square.png"> </div>
<div class="square square--small"> <img class="square__image" src="square.png"> </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;
    }

1. спасибо, но тогда первое изображение также меняет размер, но мне нужно изменить только второе изображение

2. @MIN Я отредактировал свой ответ. .square.square--small .square__image { ... } следует позаботиться об этом 🙂

Ответ №2:

здравствуйте, вы можете использовать этот селектор css:

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

Ответ №3:

Сделайте так, чтобы изображение не перекрывало div , установив для него max-width значение to 100% , max-height to 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;
        }

Опять же, ширина и высота только для демонстрации, изменяйте по своему усмотрению.

Ответ №4:

изображение рабочего кода

 <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;
}