Масштабирование картинки по высоте в родителе меньшего размера

Question

Прошу помощи. Необходимо разместить изображение в родительском контейнере. Изображение больше чем родитель и нужно, не нарушая размеры родителя, положить в него картинку, масштабировав ее по высоте родителя и скрыв слева и справа все, что выходит за границы родителя. Ширина родителя явно не определена, есть только высота, рассчитываемая с помощью calc.

    .container
    {
    height: calc(100vh - 56px); 
    overflow: hidden; 
    }

    .container img
    {
    height: auto; 
    max-height: 100% 
    }

HTML


<div class="container"><img src="/img/spec3/panel.png" /></div>

Answer 1

Абсолютное позиционирование вам в помощь:

    body {
      margin: 0;
    }
    
    .container {
      height: calc(100vh - 56px);
      overflow: hidden;
      position: relative;
      margin: 0;
    }

    .container img {
      display: block;
      position: absolute;
      top: 50%;
      left: 50%;
      max-height: 100%;
      transform: translate(-50%, -50%);
    }

<div class="container">
  <img src="https://steamuserimages-a.akamaihd.net/ugc/940586530515504757/CDDE77CB810474E1C07B945E40AE4713141AFD76/" alt="">
</div>

Answer 2

Вариант с flex (картинка всегда по центру, края в случае маленькой ширины родителя обрезаются равномерно):

.container {
    height: calc(100vh - 56px);
    overflow: hidden;
    border: 1px solid red;
    display: flex;
    justify-content: center;
    align-items: center;
}
.container img {
    height: auto;
    max-height: 100%;
}

<div class="container"><img src="https://avatars.mds.yandex.net/get-pdb/2109322/b7767aa0-85b7-48c9-b949-f229cfcc9ef5/s1200" alt=""></div>

БЛОГ НА HUSL

Масштабирование картинки по высоте в родителе меньшего размера

Ответы (2 шт):