下記のようなコードで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件
あなたの回答
tips
プレビュー
バッドをするには、ログインかつ
こちらの条件を満たす必要があります。
2017/10/31 07:07
2017/10/31 07:16
2017/10/31 07:19
2017/10/31 07:21
2017/10/31 07:22