Bootstrap 和条件图像大小

Question

对于横跨浏览器宽度的桌面图像，我们希望在我们的 Bootstrap/Classic ASP 站点中为滑块显示较小的图像。该网站目前正在使用 Bootstrap 的内置 'img-responsive' class 调整高分辨率图像的大小，但我们认为如果我们为 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-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来演示。

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>

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