引导和条件图像大小

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

    <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>

可以通过改变您想要的高度和宽度来改变图像尺寸。试试这个代码。

Answer 2

您根本不需要任何服务器端或 JavaScript 支持。您只需将图像更改为 CSS background-images 而不是 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 步 - 添加响应式版本

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

@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 来演示它。