Блог

Главная - Вопросы по программированию - Почему изображение внутри масштабируемого div становится меньше, а не масштабируется вместе со своим родителем?

Почему изображение внутри масштабируемого div становится меньше, а не масштабируется вместе со своим родителем?

#javascript #html #css #bootstrap-4

Вопрос:

Я пытаюсь создать эффект наведения на div, который немного масштабирует весь div. Пока это работает хорошо, но когда я помещаю изображение в этот div, оно становится меньше, а не масштабируется вместе со своим родителем.

Я создал скрипку, чтобы проиллюстрировать проблему: Скрипка

 <main>
  <div class=" w-100 row">
    <div class="col-6">
      <div class="base square clickable">
        <div class="content">
          <div class="d-flex align-items-center justify-content-around flex-column h-100">
            <img src="test.jpg" alt="Company" width="50%">
            <h4 class="mt-2">Company Name</h4>
            <h5 class="mt-2">Zusatz info</h5>
          </div>
        </div>
      </div>
    </div>
  </div>
</main>
 
 .base {
    background-color: grey;
    border-radius: 30px;
}

.square {
    padding-bottom: 100%;
    margin: 10px;
}

.content {
    position: absolute;
    top: 15px;
    bottom: 15px;
    left: 15px;
    right: 15px;
    text-align: center;
}

.base img {
    border-radius: 50%;
    height: auto;
}

.base.clickable {
    transition: transform 300ms;
}

.base.clickable:hover {
    cursor: pointer;
    transform: scale(1.05);
}

У кого-нибудь есть идея, почему изображение неправильно масштабируется?

Ответ №1:

content{position: absolute;}

удалите элемент из обычного потока документов, чтобы он не масштабировался вместе со своим родителем

Комментарии:

1. Я понимаю. Спасибо, это решило проблему масштабирования. Теперь мне просто нужно найти способ сделать этот внутренний раздел относительным 🙂 Хотя это должно быть достаточно просто

2. Я не понимаю, что вы подразумеваете под относительным, вы имеете в виду положение, если да position: relative; , а не position:absolute;

3. Да, я знаю. Все равно спасибо за разъяснение. Я сделал эти дивы абсолютными не просто так, так как эти «карты» являются частью чего-то большего. Мне просто нужно выяснить, как я могу сделать то же самое с относительным расположением.

Метки: ,