cssでの画像大きさ調整

Question

画像の大きさ調整

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%;
}

試したこと

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

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

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

Answer 1

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

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

.jojo{
  width:200px;
  height:200px;
  background-color: green;
}
ul {
  margin: 0 auto; /* ブラウザリセット用。リセット用CSSがある場合は不要 */
  padding: 0 0; /* ブラウザリセット用。リセット用CSSがある場合は不要 */
  width: 100%;  /* jojoと同じ幅にする */
  height: 100%;  /* jojoと同じ高さにする */
  list-style-type: none;
}
.js-list {
display: flex;
flex-wrap:wrap;
}
.js-list li {
  width:50%;  /* ulの半分の幅にする */
  height: 50%;  /* ulの半分の高さにする */
}
.js-list li img {
  width: 100%;  /* liの幅いっぱいに画像を表示 */
  height: 100%;  /* liの高さいっぱいに画像を表示 */
  object-fit: cover;  /* liの中に縦横比を保持して画像をトリミング */
  object-position: 50% 0%;  /* 顔が見えるようポジション調整 */
}

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

.jojo{
  width:200px;
  height:200px;
  background-color: green;
}
ul {
  margin: 0 auto; /* ブラウザリセット用。リセット用CSSがある場合は不要 */
  padding: 0 0; /* ブラウザリセット用。リセット用CSSがある場合は不要 */
  width: 100%;  /* jojoと同じ幅にする */
  height: 100%;  /* jojoと同じ高さにする */
  list-style-type: none;
}
.js-list {
display: flex;
flex-wrap:wrap;
}
.js-list li {
  width:50%;  /* ulの半分の幅にする */
  height: 50%;  /* ulの半分の高さにする */
  overflow: hidden;  /* li内のテキストを非表示にする */
  text-indent: 100%;  /* li内のテキストを非表示にする */
  white-space: nowrap;  /* li内のテキストを非表示にする */
}
.js-list li:first-of-type,
.js-list li:nth-of-type(2),
.js-list li:nth-of-type(3),
.js-list li:nth-of-type(4) {
  background-image: url(http://livedoor.blogimg.jp/koebuta/imgs/6/4/642f1180.jpg);
  background-position: 50% 0%;
  background-size: cover;
}

<div class="jojo">
  <ul class="js-list">
    <li>jojoの画像</li>
    <li>jojoの画像</li>
    <li>jojoの画像</li>
    <li>jojoの画像</li>
  </ul>
</div>

Comments

[退会済みユーザー]

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

Answer 2

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

.jojo {
  width: 200px;
  height: 200px;
  background-color: green;
}

ul {
  list-style: none;
}

.js-list {
  display: flex;
  flex-wrap:wrap;
  padding: 0;
  margin: 0;
}

.js-list li {
  width: 100px;
  height: 100px;
}

.js-list li img {
  width: 100px;
  height: 100px;
}

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

Comments

[退会済みユーザー]

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

[Daregada]

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

[退会済みユーザー]

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

[Daregada]

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

Answer 3

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

.jojo img{
width:200px;
height:200px;
background-color: green;
}

Comments

[退会済みユーザー]

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