引导和条件映像大小

Question

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

图像大小可以通过更改所需的高度和宽度来改变。试试这段代码。