
アイデアは、します。 フォーカス 内で、 DIV, イメージ 絶対位置決め { 位置: 絶対; }. これを行うに, まず第一には、します。 割り当てる, イメージを含む div に, 位置決め 相対, 相対位置を持つ要素の親コンテナーは、画像の絶対位置を防ぐ 次, または障害が発生しました。, に、 体.
Div と同じ内のイメージは、次のコードがあると仮定すると:
1 2 3 | <div class="contenedor"> <img class="imagen" src="" /> </div> |
コンテナーと画像に適用されるスタイルは以下のとおりです。:
1 2 3 4 5 6 7 8 9 10 11 | .contenedor { position: relative; } .imagen { position:absolute; left:0px; right:0px; top:0px; margin:auto; } |
いくつかの結果を確認するには 例, つもりです。 変更 HTML コードを割り当てることによって、 エッジ と、 サイズ div に, 追加するだけでなく、 ルート と、 サイズ イメージに. それはこのようなものになります:
1 2 3 4 5 | <div class="contenedor" style="border:1px solid orange;width:100%;max-width:500px;height:400px;"> <img class="imagen" src="https://professor-falken.com/wp-content/uploads/2016/04/10-fondos-de-pantalla-para-que-uses-en-WhatsApp-Telegram-o-tu-aplicacion-de-mensajeria-favorita-Image-5-professor-falken.com_.jpg" style="width:200px;" /> </div> |
と, その後、, 結果:


私達にコメントを残すかへの入力、フォーラム