Обрезать верхние 10% изображения с помощью CSS?

Question

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

Используя следующее, я могу обрезать верхнюю часть изображения, но для этого необходимо вручную указать количество изображения, отображаемого в пикселях. Есть ли способ указать, что я хочу обрезать верхние 10% изображения, не зная заранее размер изображения?

.container {
  overflow: hidden;
  position: relative;
  height: 370px;
}

.container img {
  position: absolute;
  margin-left: auto;
  margin-right: auto;
  bottom: 0;
  left: 0;
  right: 0;
}

<div class="container">
  <img class="img" src="http://placekitten.com/400/500" />
</div>

Answer 1

Вот идея, основанная на масштабе.Вы сохраняете изображение в потоке (не используйте position:absolute), затем масштабируете контейнер на 0.9, что составляет 90% от общей высоты, а затем масштабируете изображение на 1.1, чтобы сохранить его исходный размер.Это обрезает изображение на 10%, но поскольку преобразование является только визуальным эффектом, у вас может быть место в верхней или нижней части контейнера (в зависимости от transform-origin)

.container {
  overflow: hidden;
  outline:1px solid red;
  display:inline-block;
}

.container img {
  display:block;
}

.cut {
  transform:scaleY(0.9);
  transform-origin:top; /* The extra space will be on the bottom*/
}

.cut img {
  transform:scaleY(1.1);
  transform-origin:bottom; /* This should be bottom to cut the top*/
}

<div class="container">
  <img class="img" src="http://placekitten.com/300/200" >
</div>
<div class="container cut">
  <img class="img" src="http://placekitten.com/300/200" >
</div>

Чтобы быть более точным, мы можем рассмотреть calc() как показано ниже:

.container {
  overflow: hidden;
  outline:1px solid red;
  display:inline-block;
}

.container img {
  display:block;
}

.cut {
  transform:scaleY(0.9);
  transform-origin:top; /* The extra space will be on the bottom*/
}

.cut img {
  transform:scaleY(calc(1/0.9));
  transform-origin:bottom; /* This should be bottom to cut the top*/
}

<div class="container">
  <img class="img" src="http://placekitten.com/300/200" >
</div>
<div class="container cut">
  <img class="img" src="http://placekitten.com/300/200" >
</div>

Answer 2

Это должно сработать, используя translateY (полученный от Как я могу получить высоту элемента, используя только css )

Как видите, .container не имеет жестко заданной высоты, однако он будет загружаться с исходной высотой изображения, которая составляет 500 пикселей, даже если изображение загружается как 450 пикселей (500 пикселей - 10%)

.container {
    overflow: hidden;
    position: relative;
}

.container img {
    margin-left: auto;
    margin-right: auto;
    bottom: 0;
    left: 0;
    right: 0;
    transform: translateY(-10%);
}

<div class="container">
    <img class="img" src="http://placekitten.com/400/500" />
</div>

Answer 3

Я думаю, что лучший подход к этому без Javascript - это перевести изображение на определенный процент, а затем масштабировать, чтобы заполнить исходную высоту контейнера.Все остальное оставит пробел внизу.

.img_container img {
  transform: translateY(-50%) scale(2);
}

https://jsfiddle.net/amoliski/n4ojdzyr/

Answer 4

Альтернативой может быть использование CSS-свойства top негативным образом на относительном изображении, как показано ниже.Это работает для изображения произвольной ширины и высоты.Просто настройте значение top соответственно.

html,body{ height:100%; margin:0; padding:0; }
.container {
    overflow: hidden;
    position: relative;
    height: 100%;
    width: 100%;
    display:flex;
    margin-bottom: -10%;
    align-items:center;
    justify-content:center;
}

.container img {
    position: relative;
    bottom: 0;
    left: 0;
    height: 100%;
    top: -10%;
    right: 0;
}

<div class="container">
    <img class="img" src="http://placekitten.com/400/500" />
</div>

Чтобы удалить дополнительное нижнее поле, просто вычтите margin-bottom, равное сумме, которую вы вычли из верхней части.Вот оно margin-bottom: -10%;

Настройте верхнее значение в соответствии с вашими динамическими изображениями.Также обратите внимание, я добавил height:100% в ваш контейнер, чтобы вы могли видеть полное изображение, но верхняя часть обрезана.Я использовал flex для центрирования.
Проверить другое изображение, но на этот раз оно обрезается 50% сверху

html,body{ height:100%; margin:0; padding:0; }
.container {
    overflow: hidden;
    position: relative;
    height: 100%;
    width: 100%;
    margin-bottom: -50%;
    display:flex;
    align-items:center;
    justify-content:center;
}

.container img {
    position: relative;
    bottom: 0;
    left: 0;
    height: 100%;
    top: -50%;
    right: 0;
}

<div class="container">
    <img class="img" src="https://www.fujifilm.com/products/digital_cameras/x/fujifilm_x_t3/sample_images/img/index/ff_x_t3_002.JPG" />
</div>

Answer 5

Вы можете сделать это с небольшим количеством JavaScript (для простоты я добавил это, но вы можете переместить его в его собственную функцию)

<div class="container">
    <img class="img" src="http://placekitten.com/400/500" onload="javascript:this.parentElement.style.height = (this.height * 0.9)+'px';" />
</div>

Вот рабочий JSfiddle .