使用媒體查詢製作圖像響應

Question

任何人都可以使用媒體查詢來幫助使此列表佈局響應不同的屏幕尺寸嗎？目前，它是根據屏幕大小調整的流體佈局。我需要關於使用媒體查詢的建議。

我原來的代碼是在https://jsfiddle.net/7qsp1k0o/2/

.item.list-group-item { 
 
    float: none; 
 
    width: 100%; 
 
    background-color: #fff; 
 
    margin-bottom: 10px; 
 
} 
 
.item.list-group-item .list-group-image { 
 
    margin-right: 10px; 
 
} 
 
.item.list-group-item .thumbnail { 
 
    margin-bottom: 0px; 
 
} 
 
.item.list-group-item .caption { 
 
    padding: 9px 9px 0px 9px; 
 
} 
 
.item.list-group-item:before, 
 
.item.list-group-item:after { 
 
    display: table; 
 
    content: " "; 
 
} 
 
.item.list-group-item img { 
 
    float: left; 
 
} 
 
.item.list-group-item:after { 
 
    clear: both; 
 
} 
 
.list-group-item-text { 
 
    margin: 0 0 11px; 
 
}

<link href="//maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" /> 
 
<div class="container"> 
 

 
    <div id="products" class="row list-group "> 
 
    <div class="item col-xs-4 col-lg-4 list-group-item"> 
 
     <div class="thumbnail"> 
 
     <img class="group list-group-image" src="http://placehold.it/400X250/000/fff" alt="" /> 
 
     <div class="caption"> 
 
      <h4 class="group inner list-group-item-heading"> 
 
         Activity title</h4> 
 
      <p class="group inner list-group-item-text"> 
 
      Product description... Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat.</p> 
 
      <div class="row"> 
 
      <div class="col-xs-12 col-md-6"> 
 
       <p class="lead"> 
 
       Charge : $21.000</p> 
 
      </div> 
 
      <div class="col-xs-12 col-md-6"> 
 
       <a class="btn btn-success" href="#">Apply Now</a> 
 
      </div> 
 
      </div> 
 
     </div> 
 
     </div> 
 
    </div> 
 

 

 
    <div class="item col-xs-4 col-lg-4 list-group-item"> 
 
     <div class="thumbnail"> 
 
     <img class="group list-group-image" src="http://placehold.it/400X250/000/fff" alt="" /> 
 
     <div class="caption"> 
 
      <h4 class="group inner list-group-item-heading"> 
 
         Activity title</h4> 
 
      <p class="group inner list-group-item-text"> 
 
      Product description... Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat.</p> 
 
      <div class="row"> 
 
      <div class="col-xs-12 col-md-6"> 
 
       <p class="lead"> 
 
       Charge : $21.000</p> 
 
      </div> 
 
      <div class="col-xs-12 col-md-6"> 
 
       <a class="btn btn-success" href="#">Apply Now</a> 
 
      </div> 
 
      </div> 
 
     </div> 
 
     </div> 
 
    </div> 
 

 
    <div class="item col-xs-4 col-lg-4 list-group-item"> 
 
     <div class="thumbnail"> 
 
     <img class="group list-group-image" src="http://placehold.it/400X250/000/fff" alt="" /> 
 
     <div class="caption"> 
 
      <h4 class="group inner list-group-item-heading"> 
 
         Activity title</h4> 
 
      <p class="group inner list-group-item-text"> 
 
      Product description... Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat.</p> 
 
      <div class="row"> 
 
      <div class="col-xs-12 col-md-6"> 
 
       <p class="lead"> 
 
       Charge : $21.000</p> 
 
      </div> 
 
      <div class="col-xs-12 col-md-6"> 
 
       <a class="btn btn-success" href="#">Apply Now</a> 
 
      </div> 
 
      </div> 
 
     </div> 
 
     </div> 
 
    </div> 
 
    </div> 
 
</div>

編輯：加入想要的結果。 我希望文字不應該在圖像下面流動，而是整個東西（圖像和框）應該縮小以適應屏幕尺寸。

Answer 1

造型是基於創意，但是這可能會幫助你..

<div class="container"> 
    <div class="row"> 
     <!-- BEGIN PRODUCTS --> 
     <div class="col-md-3 col-sm-6 col-xs-12"> 
      <span class="thumbnail"> 
       <img src="http://placehold.it/500x400" alt="..."> 
       <h4>Product Tittle</h4> 
       <div class="ratings"> 
        <span class="glyphicon glyphicon-star"></span> 
        <span class="glyphicon glyphicon-star"></span> 
        <span class="glyphicon glyphicon-star"></span> 
        <span class="glyphicon glyphicon-star"></span> 
        <span class="glyphicon glyphicon-star-empty"></span> 
       </div> 
       <p>Lorem Ipsum is simply dummy text of the printing and typesetting industry. </p> 
       <hr class="line"> 
       <div class="row"> 
        <div class="col-md-6 col-sm-6"> 
         <p class="price">$29,90</p> 
        </div> 
        <div class="col-md-6 col-sm-6"> 
         <button class="btn btn-success right" > BUY ITEM</button> 
        </div> 

       </div> 
      </span> 
     </div> 
     <div class="col-md-3 col-sm-6 col-xs-12"> 
      <span class="thumbnail"> 
       <img src="http://placehold.it/500x400" alt="..."> 
       <h4>Product Tittle</h4> 
       <div class="ratings"> 
        <span class="glyphicon glyphicon-star"></span> 
        <span class="glyphicon glyphicon-star"></span> 
        <span class="glyphicon glyphicon-star"></span> 
        <span class="glyphicon glyphicon-star"></span> 
        <span class="glyphicon glyphicon-star-empty"></span> 
       </div> 
       <p>Lorem Ipsum is simply dummy text of the printing and typesetting industry. </p> 
       <hr class="line"> 
       <div class="row"> 
        <div class="col-md-6 col-sm-6"> 
         <p class="price">$29,90</p> 
        </div> 
        <div class="col-md-6 col-sm-6"> 
         <button class="btn btn-success right" > BUY ITEM</button> 
        </div> 

       </div> 
      </span> 
     </div> 
     <div class="col-md-3 col-sm-6 col-xs-12"> 
      <span class="thumbnail"> 
       <img src="http://placehold.it/500x400" alt="..."> 
       <h4>Product Tittle</h4> 
       <div class="ratings"> 
        <span class="glyphicon glyphicon-star"></span> 
        <span class="glyphicon glyphicon-star"></span> 
        <span class="glyphicon glyphicon-star"></span> 
        <span class="glyphicon glyphicon-star"></span> 
        <span class="glyphicon glyphicon-star-empty"></span> 
       </div> 
       <p>Lorem Ipsum is simply dummy text of the printing and typesetting industry. </p> 
       <hr class="line"> 
       <div class="row"> 
        <div class="col-md-6 col-sm-6"> 
         <p class="price">$29,90</p> 
        </div> 
        <div class="col-md-6 col-sm-6"> 
         <button class="btn btn-success right" > BUY ITEM</button> 
        </div> 

       </div> 
      </span> 
     </div> 
     <div class="col-md-3 col-sm-6 col-xs-12"> 
      <span class="thumbnail"> 
       <img src="http://placehold.it/500x400" alt="..."> 
       <h4>Product Tittle</h4> 
       <div class="ratings"> 
        <span class="glyphicon glyphicon-star"></span> 
        <span class="glyphicon glyphicon-star"></span> 
        <span class="glyphicon glyphicon-star"></span> 
        <span class="glyphicon glyphicon-star"></span> 
        <span class="glyphicon glyphicon-star-empty"></span> 
       </div> 
       <p>Lorem Ipsum is simply dummy text of the printing and typesetting industry. </p> 
       <hr class="line"> 
       <div class="row"> 
        <div class="col-md-6 col-sm-6"> 
         <p class="price">$29,90</p> 
        </div> 
        <div class="col-md-6 col-sm-6"> 
         <button class="btn btn-success right" > BUY ITEM</button> 
        </div> 

       </div> 
      </span> 
     </div> 
     <!-- END PRODUCTS --> 
    </div> 
</div> 

而且CSS代碼

h4{ 
    font-weight: 600; 
} 
p{ 
    font-size: 12px; 
    margin-top: 5px; 
} 
.price{ 
    font-size: 30px; 
    margin: 0 auto; 
    color: #333; 
} 
.right{ 
    float:right; 
    border-bottom: 2px solid #4B8E4B; 
} 
.thumbnail{ 
    opacity:0.70; 
    -webkit-transition: all 0.5s; 
    transition: all 0.5s; 
} 
.thumbnail:hover{ 
    opacity:1.00; 
    box-shadow: 0px 0px 10px #4bc6ff; 
} 
.line{ 
    margin-bottom: 5px; 
} 
@media screen and (max-width: 770px) { 
    .right{ 
     float:left; 
     width: 100%; 
    } 
}