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

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

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

HTML5 (Hyper Text Markup Language、バージョン 5)は、マークアップ言語であるHTMLの第5版です。

コードレビュー

コードレビューは、ソフトウェア開発の一工程で、 ソースコードの検査を行い、開発工程で見過ごされた誤りを検出する事で、 ソフトウェア品質を高めるためのものです。

CSS

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

Q&A

解決済

3回答

567閲覧

cssでの画像大きさ調整

退会済みユーザー

退会済みユーザー

総合スコア0

HTML5

HTML5 (Hyper Text Markup Language、バージョン 5)は、マークアップ言語であるHTMLの第5版です。

コードレビュー

コードレビューは、ソフトウェア開発の一工程で、 ソースコードの検査を行い、開発工程で見過ごされた誤りを検出する事で、 ソフトウェア品質を高めるためのものです。

CSS

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

0グッド

0クリップ

投稿2020/06/13 04:51

画像の大きさ調整

cssでの画像の大きさ調整がうまくいきません。
画像一枚ならうまく反応するのですが、四枚になるとうまく反応しません。
画像四枚を正方形の中に入れたいです。

発生している問題・エラーメッセージ

エラーメッセージ

該当のソースコード

HTML(1)

<div class="duo"> <img src="http://livedoor.blogimg.jp/koebuta/imgs/6/4/642f1180.jpg"width="100%" height="100%"> </div> CSS(1) .duo{ width:200px; height:200px; }

HTML(2)

<div class="jojo"> <ul class="js-list"> <li><img src="http://livedoor.blogimg.jp/koebuta/imgs/6/4/642f1180.jpg"width="100%"      height="100%"></li> <li><img src="http://livedoor.blogimg.jp/koebuta/imgs/6/4/642f1180.jpg"width="100%"      height="100%"></li> <li><img src="http://livedoor.blogimg.jp/koebuta/imgs/6/4/642f1180.jpg"width="100%"      height="100%"></li> <li><img src="http://livedoor.blogimg.jp/koebuta/imgs/6/4/642f1180.jpg"width="100%"      height="100%"></li> </ul> </div>

CSS(2)
.jojo{
width:200px;
height:200px;
background-color: green;
}
ul {
list-style: none;
}
.js-list {
display: flex;
flex-wrap:wrap;
}
.js-list li {
width:50%;
}

試したこと

(1)のように画像一枚なら正方形の200pxの画像になるのですが、(2)を200pxの正方形にちょうど四枚の画像を表したいです。heightは200pxになるのですが元の画像の縦長の比率で四枚並んでしまいます。正方形の画像を四枚並べるにはどうしたらよいでしょうか?
画像そのものの大きさは変更できません。

補足情報(FW/ツールのバージョンなど)

画像そのものの大きさは変更できません。

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

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

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

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

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

guest

回答3

0

ベストアンサー

お役に立てるかわかりませんが、2つの方法をご提案します。CSSの記述はもとのコードをベースに記述していますが、ブラウザCSSが適用されそうなところはリセット用のCSSを一部追加しています。reset.cssを使用しているなど不要の場合は削除してださい。一応ざっくりコメントを入れています。

ひとつめはobject-fitを使用する方法で、下記のコードです。
メリットはCSSの記述のみ変更すればいいこと。デメリットとしてはIE11ではサポートしていない点です。

CSS

1.jojo{ 2 width:200px; 3 height:200px; 4 background-color: green; 5} 6ul { 7 margin: 0 auto; /* ブラウザリセット用。リセット用CSSがある場合は不要 */ 8 padding: 0 0; /* ブラウザリセット用。リセット用CSSがある場合は不要 */ 9 width: 100%; /* jojoと同じ幅にする */ 10 height: 100%; /* jojoと同じ高さにする */ 11 list-style-type: none; 12} 13.js-list { 14display: flex; 15flex-wrap:wrap; 16} 17.js-list li { 18 width:50%; /* ulの半分の幅にする */ 19 height: 50%; /* ulの半分の高さにする */ 20} 21.js-list li img { 22 width: 100%; /* liの幅いっぱいに画像を表示 */ 23 height: 100%; /* liの高さいっぱいに画像を表示 */ 24 object-fit: cover; /* liの中に縦横比を保持して画像をトリミング */ 25 object-position: 50% 0%; /* 顔が見えるようポジション調整 */ 26}

ふたつめはhtmlのli内の画像を削除してCSSで背景指定する方法で、下記のコードです。
ご希望の「画像を並べる」とは若干意味合いが異なるかもしれませんが、IEでも表示可能です。
ただCSSに記述するのでhtmlは投稿画面で〜という場合は難しいですね。

CSS

1.jojo{ 2 width:200px; 3 height:200px; 4 background-color: green; 5} 6ul { 7 margin: 0 auto; /* ブラウザリセット用。リセット用CSSがある場合は不要 */ 8 padding: 0 0; /* ブラウザリセット用。リセット用CSSがある場合は不要 */ 9 width: 100%; /* jojoと同じ幅にする */ 10 height: 100%; /* jojoと同じ高さにする */ 11 list-style-type: none; 12} 13.js-list { 14display: flex; 15flex-wrap:wrap; 16} 17.js-list li { 18 width:50%; /* ulの半分の幅にする */ 19 height: 50%; /* ulの半分の高さにする */ 20 overflow: hidden; /* li内のテキストを非表示にする */ 21 text-indent: 100%; /* li内のテキストを非表示にする */ 22 white-space: nowrap; /* li内のテキストを非表示にする */ 23} 24.js-list li:first-of-type, 25.js-list li:nth-of-type(2), 26.js-list li:nth-of-type(3), 27.js-list li:nth-of-type(4) { 28 background-image: url(http://livedoor.blogimg.jp/koebuta/imgs/6/4/642f1180.jpg); 29 background-position: 50% 0%; 30 background-size: cover; 31}

HTML

1<div class="jojo"> 2 <ul class="js-list"> 3 <li>jojoの画像</li> 4 <li>jojoの画像</li> 5 <li>jojoの画像</li> 6 <li>jojoの画像</li> 7 </ul> 8</div>

投稿2020/06/13 15:37

編集2020/06/13 15:39
sasa_

総合スコア140

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

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

退会済みユーザー

退会済みユーザー

2020/06/14 02:31

回答ありがとうございます! 解決いたしました! コメントまでつけていただいて、何がどう動いているのかわかりやすかったです!
guest

0

やりたいことは、縦200px,横200pxの正方形のdiv.jojoの内部に、縦横2個ずつの正方形(縦100px,横100px)の画像を計4個並べるということでよろしいですか?

css

1.jojo { 2 width: 200px; 3 height: 200px; 4 background-color: green; 5} 6 7ul { 8 list-style: none; 9} 10 11.js-list { 12 display: flex; 13 flex-wrap:wrap; 14 padding: 0; 15 margin: 0; 16} 17 18.js-list li { 19 width: 100px; 20 height: 100px; 21} 22 23.js-list li img { 24 width: 100px; 25 height: 100px; 26}

CSS変数とcalc()を使いたいけれど、IE11で動かないのでベタに書いてあります。

投稿2020/06/13 05:40

Daregada

総合スコア11990

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

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

退会済みユーザー

退会済みユーザー

2020/06/13 06:35

回答ありがとうございます! 画像そのものの大きさを設定せずに画像を四枚正方形に合わせることは可能でしょうか?
Daregada

2020/06/13 07:46

なぜ、そうしたいのでしょう。もとの質問からしてそうなのですが、「こうしたい」ということだけ書かれているので。「なんのためにそうしたいのか」を書いてもらえると、「実は別の方法のほうが簡単にできる」など、答えの幅が広がりますよ。
退会済みユーザー

退会済みユーザー

2020/06/14 17:11

回答ありがとうございます! インターン先の課題として出されて、元の画像の大きさを変えて提出したところ、画像の大きさを設定してはいけないといわれたので、やり方がわからず質問いたしました。
Daregada

2020/06/15 00:18

それなら、「画像の大きさを指定することなしに」と質問文に書けばよろしい。回答があった後で(回答者には知り得ない)条件を付け加えるのは、どちらにとっても無駄な作業が増えることになります。
guest

0

拝見しました。jojoクラス以下すべてを指定しているためうまく動作しないのではないかと思います。
以下のようにimgタグを指定してはどうでしょうか?

css

1.jojo img{ 2width:200px; 3height:200px; 4background-color: green; 5}

投稿2020/06/13 05:28

ToyoshimaHi

総合スコア130

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

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

退会済みユーザー

退会済みユーザー

2020/06/13 06:18

回答ありがとうございます! やってみたのですが、画像同士が重なってしまいました。。。。
guest

あなたの回答

tips

太字

斜体

打ち消し線

見出し

引用テキストの挿入

コードの挿入

リンクの挿入

リストの挿入

番号リストの挿入

表の挿入

水平線の挿入

プレビュー

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

ただいまの回答率
85.35%

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

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

質問する

関連した質問