画像を横並びして画面幅より大きくし、中央を基準として両端を切る

前提・実現したいこと

画像を5つ横並べし、画面幅より大きくしたのち、3番目の画像を中心に中央に寄せて余った左右の画像を切りたいです。

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

やり方が potition:-X; ＋ overflow-x:hidden;で無理やり合わせることしか出来ないです。
ですがそれだと画面幅を変更するとずれてしまいます。

何かいい方法はないでしょうか。

該当のソースコード

html
1        <div class="main">
2          <div class="main-1">
3            <img src="img/pickup8.jpg" alt="">
4            <img src="img/pickup9.jpg" alt="">
5            <img src="img/pickup1.jpg" alt="">
6            <img src="img/pickup2.jpg" alt="">
7            <img src="img/pickup3.jpg" alt="">
8          </div>
9        </div>

css
1.main{
2  position: relative;
3  height: 500px;
4  overflow-x: hidden;
5}
6
7.main-1{
8  display: flex;
9  position: absolute;
10  left: -600px;
11}
12
13.img{
14 width: 30%;
15 padding: 0 20px;
16}

試したこと

親要素のwidth変更、text-aline:center、margin:0 auto;

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

回答3件

いろんなやり方ありそうですけど
例えば

css
1.main {
2  overflow: hidden;
3  display: flex;
4  justify-content: center;
5}
6
7.inner {
8  display: flex;
9  flex-wrap: nowrap;
10}
11

html
1<div class="main">
2  <div class="inner">
3    <img src="img/pickup8.jpg" alt="">
4    <img src="img/pickup9.jpg" alt="">
5    <img src="img/pickup1.jpg" alt="">
6    <img src="img/pickup2.jpg" alt="">
7    <img src="img/pickup3.jpg" alt="">
8  </div>
9</div>

みたいなことですか？

投稿2021/10/24 17:14

recal

総合スコア1128

自分の勉強不足でした。
justify-content:centerで出来ました。

投稿2021/10/25 11:07

退会済みユーザー

総合スコア0

ベストアンサー

自分の勉強不足でした。
position、leftを消し、display:flexの下にjustify-content:centerで出来ました。

投稿2021/10/25 07:04

編集2021/10/25 13:07

退会済みユーザー

総合スコア0

recal

2021/10/25 08:34

この時間差で自己解決て、質問しといて放置なんでしょうか。

退会済みユーザー

2021/10/25 09:26

放置とは？投稿した数時間後に出来たから自己解決にしたんです。 recalさんにそのコードでは出来なかった。と返信した方がよろしかったですか？初めて利用したんですが回答に全て答えなければいけないのでしょうか？教えて頂けたら幸いです。

recal

2021/10/25 10:01

解決してるなら閉じればいいだけですよね？？答える答えないの話はしてません。質問しといて放置なんですか？です。

recal

2021/10/25 10:12 編集

>recalさんにそのコードでは出来なかった。と返信した方がよろしかったですか？ん？出来ないわけないけど、何か間違ってませんかね。あと出来ても出来なくてもフィードバックはするべきでは？

退会済みユーザー

2021/10/25 10:17

今後の分からない人のために取っておくものでは無いんですか？そのための自己解決では。放置とは回答したのに返ってこない。ということでしょうか？

recal

2021/10/25 10:23

何言ってるの？？

退会済みユーザー

2021/10/25 10:25

間違っているかどうかは分かりませんが試したら出来なかった。というだけです。分かりました。今後の勉強にさせて頂きます。申し訳ありませんが、文が人に伝わりづらいです。出来ないわけないけど、なにか間違ってませんかね？意:間違っているか？で合ってますか？フィードバックの意味がずれている気がします。

退会済みユーザー

2021/10/25 10:26

何言ってるか分からないのなら返信は結構です。ありがとうございました。

recal

2021/10/25 10:31

閉じるって消すって事ではないですし日本語不自由過ぎませんか…。人の為に取っておくと言いながら、回答に全て答えなければいけないんですか？とか言うのの自己中過ぎるし。人の事考えるみたいなポーズをとるなら、解決したら閉じて、第三者が質問に答える為の余計な時間を奪わないようにするのは人のためではないですか？回答が付いたらフィードバックをするのも人の為ですけど、全部放置ですよね、めんどくさくて。なので人のためってポーズとりながらやってる事は自己中でダサいなと。

退会済みユーザー

2021/10/25 10:47

閉じる？とは？前述の通り初めて利用したのですが自己解決が閉じるという事では無いのですか？気分を害されたのなら申し訳ありません。某質問サイトのように回答が沢山つくものだと思っており、ベストアンサー以外返信はしないものと思っていました。別にめんどくさい訳ではありません。自己中で申し訳ないです。

退会済みユーザー

2021/10/25 11:44

teratailで質問し、教えてもらいました。自己解決が閉じるということらしいのですが、ますますrecalさんの仰っている事が分かりません。