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

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

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

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

Q&A

1回答

1236閲覧

親要素を縮小することで子要素も縮小させる

uramachine

総合スコア7

CSS

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

0グッド

0クリップ

投稿2018/09/25 15:03

以下のように画像を並列に並べておいて親のpのwidthをパーセント縮小した時に並列で並べているimgも縮小させるにはどうしたら良いでしょうか?

<p> <span><img src="./common/img/home/hoge01.png" srcset="./common/img/home/hoge01.png 1x, ./common/img/home/hoge01@2x.png 2x" alt=""></span> <span><img src="./common/img/home/hoge02.png" srcset="./common/img/home/hoge02.png 1x, ./common/img/home/hoge02@2x.png 2x" alt=""></span> <span><img src="./common/img/home/hoge03.png" srcset="./common/img/home/hoge03.png 1x, ./common/img/home/hoge03@2x.png 2x" alt=""></span> <span><img src="./common/img/home/hoge04.png" srcset="./common/img/home/hoge04.png 1x, ./common/img/home/hoge04@2x.png 2x" alt=""></span> <span><img src="./common/img/home/hoge05.png" srcset="./common/img/home/hoge05.png 1x, ./common/img/home/hoge05@2x.png 2x" alt=""></span> </p>

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

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

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

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

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

yoshinavi

2018/09/26 20:24

「レスポンシブ対応したい」との解釈で良いでしょうか?いずれにしても、該当箇所のCSSも提示されると、より良い回答を得れるかと思います。
guest

回答1

0

https://wreath-ent.co.jp/blog-3560/
こういったことでしょうかね?
CSSハックで可能とされる特定環境もありますが、ブラウザによってなど、表示不可も多いので、予め製作者側で環境規定して作ったほうが、レイアウト的にはイリーガルなこと起こらずに済むかと思いますが?

投稿2018/09/25 22:14

hectopascal1013

総合スコア466

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

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

uramachine

2018/09/26 16:37

ありがとうございます。試してみたのですが、上記の方法だとimgがpの縮小率に応じて可変しませんでした。対象ブラウザは各ブラウザ最新+IE11としています。
hectopascal1013

2018/09/26 22:52

あの、想定されている、「パーセント縮小した時」というのが、複数意味ありまして。。。 ウィンドウそのものの大きさを小さくした時なども含まれますと、対応がだいぶ変わってきますよ? srcsetタグはそもそもRetina対応画像など、ディスプレイサイズに対して流動的な値を取得するものですので、タグの指定の仕方が相応ではありません。 また、spanタグはinline要素ですので、そもそも幅高さを指定できません。 もしやるとしたら、そもそものsrcsetで代替するような構想をやめて、 予め画像側で高解像度対応を用意しておき、 divやpで囲って、divで幅%を指定しておきーの背景画像として設定するとかの方がいいんじゃないですか? もちろんbodyやhtmlへの幅指定100%でmargine入れない=0指定も忘れずに。そうしないと、ウインドウ縮小した時に可変して子要素が親要素はみ出しまで起こりえます。 https://saruwakakun.com/html-css/basic/width-height inline要素とblock要素の違いはそもそもの定義では?その辺の理解をしっかりしないと。。 http://taneppa.net/display-inline-block/ display:inline-block;でも幅指定できますが、画面で可変を考えるなら、他の方法を考えないと。 そもそもsrcsetは必要です? https://qiita.com/C058/items/643a9ff2d23dfe3a0b37
guest

あなたの回答

tips

太字

斜体

打ち消し線

見出し

引用テキストの挿入

コードの挿入

リンクの挿入

リストの挿入

番号リストの挿入

表の挿入

水平線の挿入

プレビュー

まだベストアンサーが選ばれていません

会員登録して回答してみよう

アカウントをお持ちの方は

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

ただいまの回答率
85.50%

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

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

質問する

関連した質問