トランスフォームのセンタリング：スケーリングされたイメージ

Question

私はimgを持っています。上記から分かるように

transform: scale(0.5); 

、結果は目に見えないマージン/パディング（半分のサイズを元の画像に等しい）画像の上部&左側に明らかであるようなものです。結果のimgをchrome開発ツールで調べると、マージンやパディングが明白でないことがわかります。私は前の画像のサイズがわかっている場合

、Iはposition: absoluteを設定し、コンテナDIVの中心にそれを配置するtop & right値をオフセットすることができます。ただし、これは動的な画像サイズでは機能しません。

画像サイズを事前に知る必要なしに、親div内でスケールされた画像の中心を合わせるにはどうすればよいですか？

codepenとはスニペット：

#container { 
 
    position: absolute; 
 
    top: 0; 
 
    bottom: 0; 
 
    left: 0; 
 
    right: 0; 
 
    margin: auto; 
 
    width: 300px; 
 
    height: 100px; 
 
    background: #AAA; 
 
} 
 
#image { 
 
    transform: scale(.5); 
 
}

<div id="page"> 
 
    <div id="container"> 
 
    <img id="image" src="//unsplash.it/500/160?image=10" /> 
 
    </div> 
 
</div>

期待される結果を、 #imageからmax-width: 100%追加

Answer 1

規模が一定0.5ある場合は、50%左/右とtranslate(-100%, -100%)、幅使用することができますし、画像やコンテナの高さを動的にすることができ、これは動作します。

#container { 
 
    position: absolute; 
 
    top: 0; 
 
    bottom: 0; 
 
    left: 0; 
 
    right: 0; 
 
    margin: auto; 
 
    width: 300px; 
 
    height: 100px; 
 
    background: #AAA; 
 
} 
 
#image { 
 
    transform: scale(.5) translate(-100%, -100%); 
 
    position: absolute; 
 
    left: 50%; 
 
    top: 50%; 
 
}

<div id="page"> 
 
    <div id="container"> 
 
    <img id="image" src="//unsplash.it/500/160?image=10" /> 
 
    </div> 
 
</div>

Answer 2

は、容器内の画像を中心と思われます。

#container { 
 
    position:absolute; 
 
    top: 0; 
 
    bottom:0; 
 
    left: 0; 
 
    right:0; 
 
    margin: auto; 
 
    width: 300px; 
 
    height: 100px; 
 
    background: #AAA; 
 
} 
 

 
#image { 
 
    transform: scale(.5); 
 
    max-width: 100%; 
 
}

<div id="page"> 
 
    <div id="container"> 
 
    <img id="image" src="//unsplash.it/500/160?image=10" /> 
 
    </div> 
 
</div>

それをチェックアウトし、私はあなたのフィードバックを知ってみましょう。ありがとう！

Answer 3

あなたのimg要素はあなたのコンテナよりも大きいです。

使用;

max-width: 100%; 

;

transform-origin: 50% 50%;