はじめまして
最近コーディングをはじめた初心者のため、初歩的な質問かもしれないのですが
調べてみても解決ができず。
ご教示いただければ、ありがたいです。
どうぞよろしくお願い致します。
前提・実現したいこと
header部分
レスポンシブで、3枚の画像を配置したいです。
イメージとしては、以下です。
左に縦長画像1つ(400×714となっている画像)_Aとします。
右に画像2つを縦に並べる(400×391、400×456となっている画像)_B、Cとします。
ブレイクポイントは3つ指定しています。
発生している問題
AとBは、position:absoluteでtopからの位置を%指定しています。
問題が、C(400×456となっている画像)で、
ブラウザの幅を変えると、Bと重なってしまったりBとCの間にかなり余白が空いてしまったり。。。
画像Cのtopからの位置はどう指定すればよいのかわからず、とりあえず適当な%指定をしています。
該当のソースコード
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Document</title> <style> body { background: #fff; color: #101010; font-family: sans-serif; line-height: 2; font-size: 1.4rem; } main, article { width: 100%; margin: 0 auto; } section { margin: 80px auto 0; } img{ border: 0; width: 100%; height: auto; } /*container*/ .container { max-width: 1120px; margin: 0 auto; padding: 0 15px; } .container::after { content: ""; display: block; clear: both; } .header { text-align: center; } .header__img { position: relative; width: 100%; margin: 0 auto; padding-bottom: 100%; } .header__img01 { position: absolute; top: 8%; left: 0.021%; right: 49.866%; } .header__img02 { position: absolute; top: 0; left: 50.133%; right: 0.021%; } .header__img03 { position: absolute; top: 48%; left: 50.133%; right: 0.021%; } @media screen and (max-width: 959px) and (min-width: 600px){ .header__img { position: relative; max-width: 480px; } .header__img03 { position: absolute; left: 50.133%; right: 0.021%; top: 52%; } } @media screen and (min-width: 960px) { .header__img { position: relative; max-width: 600px; padding-bottom: 54%; } .header__img03 { position: absolute; left: 50.133%; right: 0.021%; top: 52%; } } .lead-grid { text-align: center; } </style> </head> <body> <header class="header"> <div class="container"> <h1> TITLE </h1> <div class="header__img"> <p class="header__img01"> <img src="https://placehold.jp/400x714.png" alt=""> </p> <p class="header__img02"> <img src="https://placehold.jp/400x391.png" alt=""> </p> <p class="header__img03"> <img src="https://placehold.jp/400x456.png" alt=""> </p> </div> </div> </header> <!-- /header --> <section class="lead-grid"> <h2>About</h2> </section> </body> </html>
試したこと
position:absoluteで、要素の高さはなくなるということは理解できているのですが
希望の位置に画像を固定させるためには、どうすればよいのか理解できておらずです。
高さをだすために、paddint-bottom:100%を使う書いてあるサイトがあったので
とりあえず,header__img部分に指定してみたのですが、
ブラウザ幅を変えてみてみると、次のsection、lead-gridとの間に余白が空きすぎてしまいました。
その他追記
display:inline-blockなどを使えば実装は可能だと思うのですが
画像同士を重ならせたい場合など、複数の画像を希望の位置に配置したい場合についての
解決方法をご教示いただければありがたいです。
回答1件
あなたの回答
tips
プレビュー