画像の敏感な行を作る方法

Question

私は画像の行をウィンドウの幅に応じて作る方法を考えています。これまでのところ私が持っている：

<div class="image-slider"> 
    <div><img src="/img1.jpg"></div> 
    <div><img src="/img2.jpg"></div> 
    <div><img src="/img3.jpg"></div> 
    <div><img src="/img4.jpg"></div> 
    <div><img src="/img5.jpg"></div> 
</div> 

と...

.image-slider { 
    display: flex; 
    overflow-y: scroll; 
} 

.image-slider div { 
    flex: 1; 
    margin: 5px 
} 

.image-slider div img { 
    width: 100%; 
    height: auto; 
    min-width: 125px; 
} 

これはうまく動作しますが、私が今欲しいのは、ウィンドウが880px未満である場合に第5の画像が消えるよう、残りの4を持っていることですイメージは残りのスペースを占めるようにサイズ変更されます。

私は第五divタグにwide-onlyクラスを追加しようとしました：

<div class="wide-only"><img src="/img5.jpg"></div> 

、その後、以下に示すように、いくつかのメディアのルールを追加しましたが、それはかなりの作業ではありません。

.image-slider div img.wide-only { 
    display:none; 
} 

@media(min-width:880px) { 
    .image-slider div img.wide-only { 
    flex: 1 /* not sure what this should be - tried display: flex too */ 
    } 
} 

Answer 1

あなたのHTMLマークアップで追加のクラスを追加しないようにしたい場合は、nth-child擬似セレクターでこれを実現し、よりクリーンで保守し、あなたのマークアップを維持することができます。

.image-slider div:nth-child(n+5);は、画像スライダーの子divの5番目、6番目などと一致します。

以下の例では、5つの要素と9つの要素を含む2つの「スライダ」があります。 880px以下では4が表示されます。上記のすべてが表示されます。

nth-childという値を持つメディアクエリを追加するだけでよいため、たとえば、1024または何かに6を、1280に8を表示したい場合など、メディアのクエリを追加するだけで済みます。 HTML とを編集してCSSを編集してください。

私は、max-widthを使用するようにメディアクエリを逆にして、小さな画面から始めて、より大きなものになるように経験を改善することに気づくでしょう。モバイルの第一のアプローチの一種。

（もちろん、スニペットフルスクリーンで表示）

.image-slider { 
 
    display: flex; 
 
    margin-bottom: 1rem; 
 
} 
 

 
.image-slider div { 
 
    flex: 1; 
 
    margin: 3px; 
 
} 
 

 
.image-slider div img { 
 
    width: auto; 
 
    max-width: 100%; 
 
} 
 

 
@media(max-width:879px) { 
 
    .image-slider div:nth-child(n+5) { 
 
    display: none; 
 
    } 
 
}

<div class="image-slider"> 
 
    <div><img src="https://lorempixel.com/400/400/"></div> 
 
    <div><img src="https://lorempixel.com/400/400/"></div> 
 
    <div><img src="https://lorempixel.com/400/400/"></div> 
 
    <div><img src="https://lorempixel.com/400/400/"></div> 
 
    <div><img src="https://lorempixel.com/400/400/"></div> 
 
</div> 
 

 

 
<div class="image-slider"> 
 
    <div><img src="https://lorempixel.com/400/400/"></div> 
 
    <div><img src="https://lorempixel.com/400/400/"></div> 
 
    <div><img src="https://lorempixel.com/400/400/"></div> 
 
    <div><img src="https://lorempixel.com/400/400/"></div> 
 
    <div><img src="https://lorempixel.com/400/400/"></div> 
 
    <div><img src="https://lorempixel.com/400/400/"></div> 
 
    <div><img src="https://lorempixel.com/400/400/"></div> 
 
    <div><img src="https://lorempixel.com/400/400/"></div> 
 
    <div><img src="https://lorempixel.com/400/400/"></div> 
 
</div>

Answer 2

display:noneを追加したので、メディアクエリにdisplay:blockを追加する必要があります（正しいタグをターゲティングしていないのでCSSセレクタも修正しました）：

.image-slider .wide-only { 
    display:none; 
} 

@media(min-width:880px) { 
    .image-slider .wide-only { 
    display:block; 
    flex: 1 /* not sure what this should be - tried display: flex too */ 
    } 
} 

フルコード：

.image-slider { 
 
    display: flex; 
 
    overflow-y: scroll; 
 
} 
 

 
.image-slider div { 
 
    flex: 1; 
 
    margin: 5px 
 
} 
 

 
.image-slider div img { 
 
    width: 100%; 
 
    height: auto; 
 
    min-width: 125px; 
 
} 
 

 
.image-slider .wide-only { 
 
    display: none; 
 
} 
 

 
@media(min-width:880px) { 
 
    .image-slider .wide-only { 
 
    display: block; 
 
    flex: 1/* not sure what this should be - tried display: flex too */ 
 
    } 
 
}

<div class="image-slider"> 
 
    <div><img src="https://lorempixel.com/400/400/"></div> 
 
    <div><img src="https://lorempixel.com/400/400/"></div> 
 
    <div><img src="https://lorempixel.com/400/400/"></div> 
 
    <div><img src="https://lorempixel.com/400/400/"></div> 
 
    <div class="wide-only"><img src="https://lorempixel.com/400/400/"></div> 
 
</div>