Bootstrap和条件图像大小

Question

对于跨越浏览器宽度的桌面图像，我们希望在Bootstrap / Classic ASP站点中为滑块显示较小的图像。该网站目前正在使用Bootstrap内置的“img-responsive”类调整高分辨率图像，但我们认为如果我们为768像素以下的视口和768像素及以上的现有图像加载较小的图像，我们可以改善体验。

以下是滑块的基本标记：

<div class="item active">
    <a href="#">
        <img src="img/slide_001_1900x650.jpg">
        <div class="carousel-content">
            <h3><a href="#">First slide</a></h3>
        </div>
    </a>
</div>
<div class="item">
    <a href="#">
        <img src="img/slide_002_1900x650.jpg">
        <div class="carousel-content">
            <h3><a href="#">Second slide</a></h3>
        </div>
    </a>
</div>
<div class="item">
    <a href="#">
        <img src="img/slide_003_1900x650.jpg">
        <div class="carousel-content">
            <h3><a href="#">Third slide</a></h3>
        </div>
    </a>
</div>

重写src似乎并不像看起来那么好，因为它本质上处理了HTTP请求的两倍。自适应图像需要PHP，而且这个站点是使用经典ASP构建的，所以我试图找出是否有可以利用的jQuery脚本与自适应图像类似。

Answer 1

您根本不需要任何服务器端或JavaScript支持。您只需要将图像更改为CSS background-image而不是HTML中的内联，然后让CSS和浏览器确定您需要的内容。

第1步 - 删除内联img代码

<div class="item active">
  <a href="#">
    <div class="carousel-content">
        <h3><a href="#">First slide</a></h3>
    </div>
  </a>
</div>
<div class="item">
  <a href="#">
    <div class="carousel-content">
        <h3><a href="#">Second slide</a></h3>
    </div>
  </a>
</div>
<div class="item">
  <a href="#">
    <div class="carousel-content">
        <h3><a href="#">Third slide</a></h3>
    </div>
  </a>
</div>

第2步 - 使用CSS background-image恢复图像

您可能必须使用background-position来定位他们的喜好。

div.item {
  height: 8em;
  width: 36em;  
  background-image: url("http://www.thecatman.info/wp-content/uploads/2014/06/five-cute-kittens.png")   
}   

第3步 - 添加响应版

当我们降到768px以下时，小猫太多了？没问题;加上这个：

@media all and (max-width: 768px) {
  div.item {
    width: 18em;
    background-image:url("http://www.polyvore.com/cgi/img-thing?.out=jpg&size=l&tid=44246076")
  }
}

这里有一个JSFiddle来演示它。

Answer 2

    <div class="item active">
            <div class="carousel-content">
                <h3><a href="#">First slide</a></h3>
            </div>
         <div class="img_disp" style="display:none">
             <img src="img/slide_001_1900x650.jpg" height="15px" width="15px">
         </div>
    </div>
    <div class="item">
            <div class="carousel-content">
                <h3><a href="#">Second slide</a></h3>
            </div>
           <div class="img_disp" style="display:none">
             <img src="img/slide_002_1900x650.jpg" height="15px" width="15px">
           </div>
    </div>
    <div class="item">
            <div class="carousel-content">
                <h3><a href="#">Third slide</a></h3>
            </div>
          <div class="img_disp" style="display:none">
              <img src="img/slide_003_1900x650.jpg" height="15px" width="15px">
          </div>

    </div>
//this is the jquery part
    <script>
    $(document).ready(function(){
       $(document).on('click','h3>a',function(event){
               event.preventDefault();
               $(this).parents('.item').find('.img_disp').show();
         });
    });
    </sript>

可以通过改变您的愿望的高度和宽度来改变图像大小。试试这段代码。