応答画像はアスペクト比を保持し、常に中央にあります

画像をアスペクト比（16：9）に保ち、同時に反応するようにするにはCSSを使用します。応答画像はアスペクト比を保持し、常に中央にあります

この画像は常に画面の中央に表示されます。スキーマをチェックして助けてください。

私はthisポストを見つけ、ChrisのソリューションとIsaacのソリューションを試しました。しかし、私はイメージを中心に持ち込むことはできません。 Bootstrapを使ってみました。

<div class="col-md-4">.col-md-4</div> 
<div class="wrapper col-md-4"> 
    <div class="main"> 
    This is your div with the specified aspect ratio. 
    </div> 
</div> 
<div class="col-md-4">.col-md-4</div>

又は

<body> 
    <div class="col-md-4" id="wrap1">.col-md-4</div>   
    <div class="col-md-4" id="aspectRatio">Aspect Ratio?</div> 
    <div class="col-md-4" id="wrap2">.col-md-4</div>   
</body>

が、すべてのdivは、他の下に一つ現れます。

divをセンターに持ち込む方法については、ブートストラップを使用しているかどうかをご確認ください。

margin:0 auto;

と幅を定義し、高さが自動であることを確認応答画像について：私はいつもとdiv要素と中央のdivに私のimgを入れ

おかげ

出典

2016-03-21 slevin

。お手伝いをしてください。

出典

2016-03-21 23:16:36 Ryuk

これは、要素をページの中央に配置します。

.element { 
    position: absolute; 
    top: 50%; 
    left: 50%; 
    transform: translateX(-50%) translateY(-50%); 
}

私はあなたがあなたの質問の後半部分に必要アスペクト比であるコンテナの100％であなたのイメージのための最小幅や最大幅を定義しなければならないと考えています。また、アスペクト比を動的に設定する必要がある場合は、常にJSがあります。 Qjueryにはあなたのプロジェクトの中で既にそれを使用しているなら、あなたが使うことができるような機能があります。

EDIT：私のような構造を有することをお勧め2番目のヘッダに画像をセンタリングする：

ラップ---------

-Secondヘッダ

を - ---------------画像

ラップの100％サイズの画像を持っています。は、幅と高さが100％の2番目のヘッダーを基準に折り返しを付けます。

私はこれが助けてくれることを願っています:)

出典

2016-03-21 23:25:32 Judder

応答画像はアスペクト比を保持し、常に中央にあります

答えて

関連する問題