質問をすることでしか得られない、回答やアドバイスがある。

15分調べてもわからないことは、質問しよう!

新規登録して質問してみよう
ただいま回答率
85.50%
CSS3

CSS(Cascading Style Sheet)の第3版です。CSS3と略されることが多いです。色やデザインを柔軟に変更することが可能になります。

CSS

CSSはXMLやHTMLで表現した色・レイアウト・フォントなどの要素を指示する仕様の1つです。

Q&A

解決済

1回答

7582閲覧

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

SugiuraY

総合スコア317

CSS3

CSS(Cascading Style Sheet)の第3版です。CSS3と略されることが多いです。色やデザインを柔軟に変更することが可能になります。

CSS

CSSはXMLやHTMLで表現した色・レイアウト・フォントなどの要素を指示する仕様の1つです。

0グッド

1クリップ

投稿2017/10/29 23:32

編集2017/10/29 23:33

下記のようなコードで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>

気になる質問をクリップする

クリップした質問は、後からいつでもMYページで確認できます。

またクリップした質問に回答があった際、通知やメールを受け取ることができます。

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

guest

回答1

0

ベストアンサー

インラインにこのように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などで余白を取ってあげると良いかと思います。 また、親要素の幅が固定であれば子要素の幅も固定にしてあげれば良いかと思います。
kei344

2017/10/31 07:19

To: SugiuraYさん 「インライン」は別ファイルやstyleタグ内にCSSをまとめずに、style=""で個別にスタイルをつけていることについての指摘だと思いますよ。
SugiuraY

2017/10/31 07:21

ご丁寧にコメントを頂き誠に有難うございます。 タグの中にstyle属性で指定することをインラインと呼ぶのですね! また、親要素と子要素のサイズの考え方についても大変勉強になりました。 重ねて御礼申し上げます。
SugiuraY

2017/10/31 07:22

kei344様 コメントを頂き誠に有難うございます。 ご指摘の件理解致しました。
guest

あなたの回答

tips

太字

斜体

打ち消し線

見出し

引用テキストの挿入

コードの挿入

リンクの挿入

リストの挿入

番号リストの挿入

表の挿入

水平線の挿入

プレビュー

15分調べてもわからないことは
teratailで質問しよう!

ただいまの回答率
85.50%

質問をまとめることで
思考を整理して素早く解決

テンプレート機能で
簡単に質問をまとめる

質問する

関連した質問