object-fitを用いたimg要素のレスポンシブ表示

【前提・実現したいこと】
・4つの横並びli要素（幅：画面幅の25%（最大300px）、高さ：400px）を覆うように画像を配置する
・画面サイズが変わっても縦横比を保ったまま画像を表示させる
・li要素内に表示させたい画像は、元画像の一部分を切り抜き、その部分をli要素のサイズに合わせて表示させる
※添付ファイルの1ページ、2ページ目をご参照ください

【発生している問題】
＜問題１：画像の切り抜きができない＞
＜問題２：画面幅を変化させると、画像が見切れる部分が発生する＞

【試したこと】
＜問題１：タテ画像の切り抜きができない＞
画像をレスポンシブに対応させるため、li要素の幅を25%、最大幅300px;を指定。
Img要素はli要素全体を覆うように表示してほしいので、幅を100%に指定。
高さは30vw、最大高さ300pxにて指定（画面サイズに応じて縦横比を維持するため）。
object-fit:coverにて、li要素分のサイズに画像が切り抜き配置させようとしたが、タテ画像が元画像がli要素内に収まるように表示されてしまう（切り出しができていない）。
Object-positionにて位置指定を変えても、画像の表示位置が変わらない

＜問題２：画面幅を変化させると、画像が見切れる部分が発生する＞
上記の状態で、画面幅を変化させると、画像のサイズが変わり、一部分が見切れてしまう。
横幅が％指定のため、幅変化よって縦横比を保つよう画像の切り出しが変わり、最大高さを超えた分が見切れていると考える。
最大高さを指定しないことで、見切れる現象は解決したが、その分高さが大きくなってしまう。

【コード】

html
1  <div class="inner">
2    <ul class="face_lists">
3      <li class="face_list">
4        <img class="face01" src="./img/tate.jpg" alt="">
5      </li>
6      <li class="face_list">
7        <img class="face02" src="./img/yoko.jpg" alt="">
8      </li>
9
10      <li class="face_list">
11        <img class="face01" src="./img/tate.jpg" alt="">
12      </li>
13      <li class="face_list">
14        <img class="face02" src="./img/yoko.jpg" alt="">
15      </li>
16    </ul>
17  </div>
18
19【css】
20.inner{
21  width: 100%;
22  max-width: 1200px;
23  margin: 0 auto;
24}
25
26.face_lists{
27  display: flex;
28}
29
30
31.face_list{
32  flex: 0 0 25%;
33  max-width: 300px;
34}
35
36img{
37  width: 100%;
38  height: 30vw;
39  max-height:300px;
40  object-fit: cover;
41}
42

【やりたいこと】
＜問題１：タテ画像の切り抜きができない＞
Object-fitにて画像の任意の一部分を拡大して切り出したい。

＜問題2：画面幅を変化させると、画像が見切れる部分が発生する＞
最大高さを指定しても画像が見切れないようにしたい。

【利用環境】
windows10

問題１，２両方を解決するには元の画像ファイルをいい形に切り出すしかないのでしょうか？
擬似要素などを使用して試してみましたが、結果は変わらずでした。
3日ほどこの問題で検討し続けているのですが、うまくいかず非常に悩んでいます。
何かいい解決策あればご教示頂きたくよろしくお願いいたします。

kuma_kuma_

2020/10/03 09:53

あの基本的な質問になりますがたて画像とよこ画像この時点で切り抜き位置違いますよね？切り抜き方に一定の法則はあるのですか？

mitti09

2020/10/03 11:04

ありがとうございます。一定の法則はないです。たて画像とよこ画像共に顔付近(頭の上〜肩下くらいまで)を縦型の長方形で切り抜きたいと思っています。

kuma_kuma_

2020/10/03 11:07

一定の法則が無いのであれば問題1、問題2は共通した処理では無理となります。あとは各画像に対して各自styleを設定するしかありません。

mitti09

2020/10/03 11:17

そうなんですね。ありがとうございます。たて画像のみで考えた時、高さの最大値は300pxに指定しているのですが、切り抜かれているのは300pxより大きくなってしまうのはなぜなのでしょうか？追加の質問になってしまい申し訳ありません。

行動規範の内容に同意します

回答1件

ベストアンサー

ボックスの縦横比固定は下記の方法で。
CSS Tips ボックスの縦横比を維持したままレスポンシブ対応にしたい｜a-masuda｜note

ボックスにoverflow: hidden;ではみ出した部分は非表示

あとは、img に position: absolute;で位置やサイズを調整して特定の部分を表示させる。
顔の部分がどこかをCSSに判断させるのは無理なので、ここは人間が手作業で調整するしかない。

css
1ul { /*リストのディフォルトをリセット */
2  list-style: none;
3  padding: 0;
4}
5.inner{
6  width: 100%;
7  max-width: 1200px;
8  margin: 0 auto;
9}
10.face_lists{
11  display: flex;
12}
13.face_list{
14  flex: 0 0 25%;
15  padding-bottom: 33%; /* 縦横比固定 25:33≒3：4 */
16  overflow: hidden;
17  position: relative;
18}
19img{
20  position: absolute;
21  object-fit: cover;
22}
23
24/* 画像の縦横比、表示したい部分によって下記の値を調整 */
25.face01 {
26  top: -30%;
27  left: -40%;
28  width:180%; 
29}
30.face02 {
31  top: -20%;
32  left: -100%;
33  width: 300%; 
34}