Как сделать изображение на половину высоты?

Question

Я составил список изображений и попытался вдвое уменьшить высоту этого изображения.

.img {
  background: #255;
}

img {
  max-width: 100%;
}

<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" rel="stylesheet" />
<div class="container">
  <div class="row">
    <div class="col">
      <div class="card">
        <div class="img">
          <img src="https://via.placeholder.com/800x200/009/fff.png">
        </div>
        <div class="card-body">
          <h5 class="card-title">Image title</h5>
          <p class="card-text">description text.</p>
        </div>
      </div>
    </div>
    <div class="col">
      <div class="card">
        <div class="img">
          <img src="https://via.placeholder.com/550x768/009/fff.png">
        </div>
        <div class="card-body">
          <h5 class="card-title">Image title</h5>
          <p class="card-text">description text.</p>
        </div>
      </div>
    </div>
  </div>
</div>

Я использовал свойство transform. Это выглядело, как будто это работало, но между изображением и текстом оставалась скрытая область. Я хочу реализовать операцию, когда это пространство потеряно.

.img {
  background: #255;
  transform: scaleY(0.5);
  transform-origin: top;
  overflow: hidden;
}

img {
  max-width: 100%;
  transform: scaleY(2);
  transform-origin: top;
}

<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css">

<div class="container">
  <div class="row">
    <div class="col">
      <div class="card">
        <div class="img">
          <img src="https://via.placeholder.com/800x200/009/fff.png">
        </div>
        <div class="card-body">
          <h5 class="card-title">Image title</h5>
          <p class="card-text">description text.</p>
        </div>
      </div>
    </div>
    <div class="col">
      <div class="card">
        <div class="img">
          <img src="https://via.placeholder.com/550x768/009/fff.png">
        </div>
        <div class="card-body">
          <h5 class="card-title">Image title</h5>
          <p class="card-text">description text.</p>
        </div>
      </div>
    </div>
  </div>
</div>

Почему открытая область остается пустым? Кроме того, как я могу скрыть передержанную область? Как я могу просмотреть изображение, которое составляет половину его высоты?

Answer 1

Я собираюсь ответить на каждый из ваших вопросов по порядку.

Почему открытая область остается пустым?

"transform: scaleY" - этостиль, применяемый к текущему элементу, чтобы определить высоту элемента, отображаемого на экране.Он не изменяет количество места на экране, выделенного для этого элемента.

Таким образом, когда вы применяете преобразование к элементу (в данном случае к изображению), он говорит, что вы хотите отобразить только половину высоты элементов на странице, а не изменить элемент на 50% его высоты.

Затем вы используете «transform-origin:», которое спрашивает, в какой точке элемента вы хотите начать отображение элемента.Затем вы выбираете «top», который сообщает веб-странице, что теперь вы хотите отобразить половину элемента, начинающегося сверху.Вот почему вы видите верхнюю половину обоих изображений.

Пустое пространство - это та часть элемента, которую вы указали и не хотите отображать.Элемент все еще имеет ту половину изображения, там он просто не отображается, поэтому это пустое пространство.

Кроме того, как скрыть переэкспонированную область?

Чтобы удалить открытую область, все, что вам нужно сделать, это удалить «transform: scaleY (0.5);»из стиля класса .img.Это говорит веб-странице, что вы хотите показать полную высоту элемента, так как для него задано значение по умолчанию, равное 1. Другой «transform: scaleY (2)» следует сохранить, поскольку теперь он удвоит размер элемента img.внутри его родительских элементов начальная высота.«Переполнение: скрытый» будет скрывать нижнюю половину высоты нового изображения.

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

Это довольно неоднозначно, поэтому я отвечу на это в предположении, что вы хотите толькопокажите верхнюю половину изображения, размеры которого вам известны.Например, с изображением 800x200 пикселей.

.img {
    height: 100px;
    overflow: hidden;
}

img {
    max-width: 100%;
}

Это просто делает элемент контейнера наполовину высотой изображения, поэтому он будет показывать только половину изображения.Переполнение другой половины изображения скрыто.Кроме того, изображение не будет изменяться в размере из-за максимальной ширины, установленной на 100%.