position:absoluteにするとmax-width:n%が効かない

下記のようなコードでdiv(position:relative)の中にimg（position:absolute）、span(position:absolute)を内包しております。

imgタグのオリジナル写真のアスペクト比を保ち、かつdivの範囲に収めるためにimgタグにmax-widthとmax-heightを90%に設定し、width:200px;height:150px;の90%のサイズに収まるように設定しております。また、imgタグとspanタグにpositon:absoluteを設定したのは、これらの要素を重ねて表示することができるようにするためです。

しかしながら、実際に写真を入れた場合、iphoneで表示した場合だけ、右に寄ってしまったため、imgタグのposition:absoluteを解除をしたのですが、そうした場合にmax-widthの90%だけきかなくなり、画像が横に広がりアスペクト比が保てなくなってしまいます。
positionがmax-widthに影響を与えることはあるのでしょうか？
また、iPhoneでのみ画像のセンタリングをできなく、positionの指定にデバイス依存の問題があるのかと思ったのですが、他に原因が考えられますでしょうか。

よろしくお願い申し上げます。

HTML
1<div style="position:relative;display:flex;justify-content: center;
2align-items: center;width:200px;height:150px;border: 1px solid #d6d6d6;border-radius:8px;" id="add_1">
3
4<img class="thumbnail" style="position:absolute; border:none;border-bottom:0px;
5border-radius:10px 10px 10px 10px;
6max-width:90%;max-height:90%;" src="" title="e._img%203.jpeg">
7
8<span style="position:absolute; top:11.5em;right:1em;relative;margin: 0px auto;padding:
9 0.1em;text-align:right;background-color:#ffffff;font-size:12px;
10padding-left:10px;padding-right:10px;">e.img 3.jpeg</span></div>

回答1件

ベストアンサー

インラインにこのようにCSSを記述するのはあまりオススメできませんが、
見た感じ親要素であるDivにDisplay:flex； justify等設定されているのに
子要素にAbsolute指定するのがよく判りません。
単純にDivの中央に画像を配置してspanテキストを上に乗せたいのであれば、
spanだけ絶対配置にしても良いかもしれません。

また、親要素にpx指定をしているのに画像widthを%指定していたり
もう少し考えを変えたほうが良いかもしれません。

画像の縦横比を維持しつつ、divの上下中央に配置し、spanを絶対配置で配置した例
※box内の余白はboxのpaddigで設定しています。

https://codepen.io/Reek/pen/mqJJye

投稿2017/10/31 06:42

shaak

総合スコア607

回答へのコメント

SugiuraY

2017/10/31 07:07

ご回答のコード例を有難うございます。申し訳ございません、本当にCSSについてはまだまだ分からないことばかりな状況です。インラインというのはimg要素のことでしょうか、divはボックスレベル要素と認識していたので。 flexはボックスの横並び目的で、親要素の中の子要素を重ねて表示することができるようにするためにabsoluteをしてみたのですが、ここらへんは本当に仕様の理解が曖昧なため、勉強します。子要素の大きさを相対的に決めたい場合には、親要素で絶対的な大きさ（widthやheight）を指定して、子要素を％指定するのかと勘違いをしておりました。

shaak

2017/10/31 07:16

インラインというのは、ここではhtmlタグに直接スタイルを書き込むことを指しています。もちろんこの書き方で動作はしますが、後々の事を考えるとhtmlとcssは分けておくことが望ましい場合がほとんどです。親要素のサイズが可変であれば、子要素画像には横幅％で指定することが多いです。この際に、画像に%指定で小さくするのではなくpaddingなどで余白を取ってあげると良いかと思います。また、親要素の幅が固定であれば子要素の幅も固定にしてあげれば良いかと思います。