サイズ変更可能な画像をCSSで中央揃えする

Question

画像の中心を特定のdivの中心に合わせようとしています。画像は元のアスペクト比を維持する必要がありますが、ブラウザの幅と高さに応じて、拡大縮小することもできなければなりません。

もっと正確には、コンテナはウィンドウ全体を塗りつぶし、両サイドに100pxのパディングがあります。コンテナの内側には、アスペクト比に応じて、水平または垂直のいずれかのパッド付きdivを塗りつぶすイメージがあります。そして最後に、そのイメージはすべての中心に位置付けられなければなりません。私はそれが十分明確に願っています

main { 
 

 
} 
 

 
main figure { 
 
    display: flex; 
 
    justify-content: center; 
 
    margin: 0; 
 
    padding: 100px; 
 
    height: calc(100vh - 200px); 
 
} 
 

 
main figure img { 
 
    display: block; 
 
    margin: auto; 
 
    max-width: 100%; 
 
    max-height: 100%; 
 
    width: auto; 
 
    height: auto; 
 
}

<main> 
 
    <figure> 
 
     <img src="https://msdnshared.blob.core.windows.net/media/TNBlogsFS/prod.evol.blogs.technet.com/CommunityServer.Blogs.Components.WeblogFiles/00/00/01/03/07/uno.jpg" /> 
 
    </figure> 
 
</main>

：

は、ここに私のコードです。ご協力いただきありがとうございます！

Answer 1

1. position:relative

2. にあなたのラッパー要素を設定し、以下のCSSを持っているあなたのimg要素を設定します。

   img{ 
       position:absolute; 
       top:50%; 
       left:50%; 
       transform:translate(-50%,-50%); 
   } 
   

これはあなたのラッパーの中央に直接画像を中央にする必要があります。

Answer 2

レスポンシブウェブデザインをサポートするブートストラップフレームワークの使用を検討してください。 img-responsiveという名前のクラスを使うと、ブラウザの幅と高さに応じたイメージを作成できます。

• は、画像とパディング
• をセンタリングするHTML
• 書き込みCSSにブートストラップCSSを含めるHTMLにブートストラップJavaScriptを含めるには、ここでは画像

にIMG-応答クラスを追加します。ブートストラップ応答イメージの例です。 http://www.w3schools.com/bootstrap/tryit.asp?filename=trybs_ref_img-responsive&stacked=h