このウェブサイトのスライダーの@mediaクエリCSSコンテンツを把握しようとしています

Question

ブラウザのサイズが750を下回ると、カバーを完全に開くことができません。私はブートストラップが初めてです。

これは私が理解するために使用しているリファレンスウェブサイトです。

https://choosemypc.net/

CSS

.slide-wrapper { 
    position: relative; 
} 
/* Not using now 
.carousel-caption { 
    text-align: left; 
    padding-right: 300px; 
    } 
*/ 
@media (min-width: 768px) { 
    .snippet { 
    max-width: 600px; 
    position: absolute; 
    background: black; 
    opacity: 0.3; 
    left: 10%; 
    top: 3%; 
    bottom: 3%; 
    } 
    .snippet-content { 
    width: 95%; 
    height: 100%; 
    background: black; 
    opacity: 0.5; 
    color: #fff; 
    } 
} 
@media screen and (max-width: 699px) and (min-width: 520px){ 
    .snippet { 
    max-width: 400px; 
    position: absolute; 
    background: black; 
    left: 0%; 
    top: 5%; 
    bottom: 5%; 
    padding: 20px 0; 
    opacity: 0.3; 
    margin-left: 0px; 
} 

    .snippet-content { 
    height: 100%; 
    background: black; 
    opacity: 0.5; 
    color: #fff; 
    margin-right: 15px; 
    } 
} 

これは、HTMLのCSSの

HTML

<div class="slide-wrapper"> 
    <div class="container-fluid">  
     <div class="row carousel-holder"> 
      <div class="col-md-12"> 
       <div class="carousel slide" id="carousel-generic" data-ride="carousel"> 
        <ol class="carousel-indicators"> 
         <li data-target="#carousel-generic" data-slide-to="0" class="active"></li> 
         <li data-target="#carousel-generic" data-slide-to="1"></li> 
         <li data-target="#carousel-generic" data-slide-to="2"></li> 
        </ol> 
        <div class="carousel-inner"> 
         <div class="item active"> 
          <%= image_tag("Ram.jpg", alt: "Ram Image", class: "slide-image img-responsive")%> 
         </div> 
         <div class="item"> 
          <%= image_tag("System.jpg", alt: "Graphiccard Image", class: "slide-image img-responsive")%> 
         </div> 
         <div class="item"> 
          <%= image_tag("Motherboard.jpg", alt: "Motherboard Image", class: "slide-image img-responsive")%> 
         </div> 
        </div> 
        <a class="left carousel-control" href="#carousel-generic" data-slide="prev"> 
         <span class="glyphicon glyphicon-chevron-left"></span> 
        </a> 
        <a class="right carousel-control" href="#carousel-generic" data-slide="next"> 
         <span class="glyphicon glyphicon-chevron-right"></span> 
        </a> 
       </div> 
       <div class="snippet"> 
        <div class="snippet-content"> 
         Content of the snippet. 
        </div> 
       </div> 
      </div> 
     </div> 
    </div> 
</div> 

これは、HTMLです。

送信したウェブサイトのリンクを確認して変更を提案してください。 ウェブサイトのようにスニペットを反応させる必要があります。ここで

Answer 1

は、私が示唆しているものです：

あなたは画像が表紙画像になりたい場合は（あなたの例のリンクのように画面いっぱい）に見て：あなたは同じことをしたい場合

background-size: cover; 

パララックス効果はに見て：あなたは、最大幅を持つことができません

background-attachment: fixed; 

...それは

...目的に反し

こちらをご覧ください：https://www.w3schools.com/cssref/css3_pr_background-size.asp

そして、ここで：https://www.w3schools.com/howto/howto_css_parallax.asp