ここから本文です

javascriptで、2枚の画像をウィンドウサイズの横幅に対して常に中央配置するにはど...

xxw********さん

2016/11/215:25:04

javascriptで、2枚の画像をウィンドウサイズの横幅に対して常に中央配置するにはどうすればよいのでしょうか。ウインドウを広げても常に2枚が中央に並ぶイメージです。

1枚だとCSSで設定すればいけたのですが、2枚だとうまくいかず。ちなみに、その2枚の画像は両方とも同じ横幅です。

どなたか教えていただけたら嬉しいです。

補足saucy_sealさん
ありがとうございます!
できたのですが、ウィンドウサイズを狭くすると、右側の画像が下にずれ込んでしまいます。
ウインドウサイズの横幅を小さくても2枚の画像の縦横比を保ったまま、表示がくずれないよう両方の画像を縮小表示するにはどうすればよいでしょうか。※ウィンドウサイズの短辺にフィットするイメージです。
■HTMLはこんな感じです。
<div id="page">
<img id="img_left" alt="左P"><img id="img_right" alt="右P">
</div>

すみません。。

閲覧数:
39
回答数:
2
お礼:
50枚

違反報告

ベストアンサーに選ばれた回答

ybb********さん

2016/11/915:46:19

xxwsd997さん

>・・・・・・表示がくずれないよう両方の画像を縮小表示・・・・・・・

ご参考に↓
<!DOCTYPE html>
<html lang="ja">
<head>
<meta name="viewport" content="initial-scale=1.0, user-scalable=no">
<meta charset="Shift-JIS">
<style>
#page { margin:auto; width:90%; display:flex; justify-content:center; background:#eeffee; }
#page img { width: 45%; margin:10px; background: #ffffdd; }
</style>
</head>
<body>
<div id="page">
<img src="http://ai.yimg.jp/c/logo/f/2.0/chiebukuro_r_34_2x.png" id="img_left" title="左P">
<img src="http://ai.yimg.jp/c/logo/f/2.0/chiebukuro_r_34_2x.png" id="img_right" title="右P">
</div>
</body>
</html>

質問した人からのコメント

2016/11/9 20:41:31

参考になりました!
ありがとうございました!
あとは画像のアスペクト比が崩れない方法を模索します!

ベストアンサー以外の回答

1〜1件/1件中

sau********さん

2016/11/217:27:52

CSSで可能だと思いますよ。

【CSS】
/* 中央垂直並び */
.v_img{
display: block;
margin-left: auto;
margin-right: auto;
}

/* 中央水平並び */
.h_center{
text-align: center;
}
.h_img{
display: inline;
}

【HTML】
<!-- 垂直 -->
<div>
<img class="v_img" src="./image1.png" alt="image1" title="写真1">
<img class="v_img" src="./image2.png" alt="image2" title="写真2">
</div>

<!-- 水平 -->
<div class="h_center">
<img class="h_img" src="./image1.png" alt="image1" title="1">
<img class="h_img" src="./image2.png" alt="image2" title="2">
</div>

みんなで作る知恵袋 悩みや疑問、なんでも気軽にきいちゃおう!

Q&Aをキーワードで検索:

Yahoo! JAPANは、回答に記載された内容の信ぴょう性、正確性を保証しておりません。
お客様自身の責任と判断で、ご利用ください。
本文はここまでです このページの先頭へ

「追加する」ボタンを押してください。

閉じる

※知恵コレクションに追加された質問は選択されたID/ニックネームのMy知恵袋で確認できます。

不適切な投稿でないことを報告しました。

閉じる