Может ли изображение в масштабе контейнера от его центра?

Здесь у меня есть изображение, которое масштабируется при расширении окна браузера, пока оно не достигнет 600 пикселей высотой, максимальной высоты его родительского контейнера. На этом этапе изображение обрезается относительно верхней части изображения. Возможно ли, чтобы изображение было вертикально центрировано в родительском контейнере, чтобы изображение масштабировалось из его центра? Он должен оставаться образ, а не фоновым изображением.Может ли изображение в масштабе контейнера от его центра?

<html> 
<head> 
    <meta charset="utf-8" /> 
    <style type="text/css"> 
     .full-width { 
      max-height: 600px; 
      overflow: hidden; 
     } 

     img.full { 
      width: 100%; 
      display: block; 
     } 
    </style> 
</head> 
<body> 
    <section class="full-width"> 
     <img class="full" src="http://toprival.com/temp/panda/images/panda.jpg" /> 
    </section> 
</body>

источник

2016-05-06 Kris Hunt

вы можете сделать это:

img.full { 
      width: 100%; 
      display: block; 
      top: 50%; 
      transform: translateY(-50%); 
     }

Он перемещает верхнее изображение вниз 50% от высоты контейнера, а затем перемещает его обратно на 50% от высоты изображения, таким образом, центрируя его по вертикали.

Однако для этого элемента контейнера требуется определенная высота и настройка positionrelative.

... и вы можете сделать то же самое для горизонтального центрирования: left: 50%; transform: translateX(-50%);

источник

2016-05-06 00:46:02 Johannes

И img.full нужна позиция: абсолютная. Благодаря! –

Может ли изображение в масштабе контейнера от его центра?

ответ

Смежные вопросы