コンテナ内の画像を中央から拡大縮小できますか？

ここでは、親ウィンドウの最大高さが600pxに達するまで、ブラウザウィンドウを拡大すると画像が拡大します。この時点で、イメージはイメージの上部に対してクロップされます。画像をその親コンテナの中心に合わせることができます。その結果、画像はその中心から尺度を変えることができますか？それは、背景画像ではなく画像である必要があります。コンテナ内の画像を中央から拡大縮小できますか？

<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％まで戻ってそれを移動させ、それによって、垂直にセンタリングします。

ただし、コンテナエレメントには、定義された高さと、の設定が機能するために、relativeの設定が必要です。

...そしてあなたが水平方向のセンタリングのために同じことを行うことができます：絶対：left: 50%; transform: translateX(-50%);

出典

2016-05-06 00:46:02 Johannes

そしてimg.fullは、位置を必要とします。ありがとう！ –

コンテナ内の画像を中央から拡大縮小できますか？

答えて

関連する問題