スライダーです。どうしても 2 つの子要素が画面内に表示されますが、各子要素を横幅 100% の画像が表示されるスライダーにしたいです。わかる方、教えてください。よろしくお願いします。 img { width: 100%; } .slides { display: flex; overflow-x: auto; scroll-snap-type: x mandatory; scroll-behavior: smooth; } .slides > .slide__item { scroll-snap-align: start; }

詳しい人求む！

flex の各子要素を横幅 100% にしたい

解決済

質問者：i-d-a-i
質問日時：2022/09/22 21:25
回答数：1件

スライダーです。
どうしても 2 つの子要素が画面内に表示されますが、
各子要素を横幅 100% の画像が表示されるスライダーにしたいです。

わかる方、教えてください。よろしくお願いします。

<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<style>
img { width: 100%; }
.slides {
display: flex;
overflow-x: auto;
scroll-snap-type: x mandatory;
scroll-behavior: smooth;
}
.slides > .slide__item {
scroll-snap-align: start;
}
</style>
</head>

<body>

<div class="slides">
<div class="slide__item">
<img src="" alt="">
</div>
<div class="slide__item">
<img src="" alt="">
</div>
</div>

</body>
</html>

通報する

この質問への回答は締め切られました。

質問の本文を隠す

回答 (1件)

ベストアンサー優先
最新から表示
回答順に表示

参考程度に

No.1ベストアンサー

回答者： fujillin
回答日時：2022/09/22 22:56

こんばんは

＞スライダーです。
としか情報がないので、なさりたいことがよくわかりませんけれど・・
flexレイアウトでは、子要素全体を並べて表示しようとします。
（基本的に、2つあれば2つを、3つなら3つを並べようとします）

画像のプロポーションを維持するために、コンテナ部分の高さを設定しておく必要がありますけれど、こんな感じのことをなさりたいのでしょうか？
（横幅を基準に、比率で高さが決まるようにしてあります）

img { width: 100%; height:100%; }
.slides {
text-align: left;
width: 95vw;
height: 40vw;
margin: 0 auto;
overflow: hidden;
overflow-x: scroll;
display: flex;
scroll-snap-type: x mandatory;
}
.slides > .slide__item {
flex: 0 0 100%;
width: 100%;
scroll-snap-align: start;
}