javascript - 调整移动网站缩略图的大小

Question

我正在为移动设备和桌面设备制作网站，但我希望图片在移动设备上加载时显示移动设备图片。例如，我有一个食物类型缩略图的图像列表，例如:

_{(来源:whereshouldieat.ie)}

但我也有移动版本的图像:

_{(来源:whereshouldieat.ie)}

当前的 CSS 是:

#portfolio #food-thumbnails img {
    border: solid 2px #fff;
    border-radius: 5px;
}

我在其他地方看到您可以使用 CSS 对图像进行重定向，如下所示: Changing Image depending on Mobile or Desktop HTML & CSS

但是因为图片都是用这个函数自动生成的:

<div id="food-thumbnails" class="row">
  <?php $i=1 ?>
  <?php foreach ($groups as $food_type): ?>
    <div>
      <div class="col-sm-4 portfolio-item food-thumbnail">
        <a href="index.php/restaurant/<?php echo $food_type ?>" class="portfolio-link food-type-thumbnail hvr-float-shadow" data-toggle="modal" data-type="<?php print $food_type ?>">
          <div class="caption">
            <div class="caption-content">
            </div>
          </div>
        <img src="<?php echo base_url() ?>assets/img/types/<?php print $food_type ?>.jpg" class="img-responsive" alt="">
        </a>
      </div>
    </div>
    <?php $i++ ?>
  <?php endforeach; ?>
</div>

我不确定我是否可以自动使用 CSS，因为图像通常必须在重定向的 CSS 中包含 URL 名称。谁能建议解决此问题的方法？

Answer 1

看起来您在这里使用的是 Bootstrap 3，您可以使用 PHP 将这两个图像添加到页面，然后在移动设备上隐藏不需要的图像，在桌面设备上隐藏不需要的图像。这可以使用隐藏的响应实用程序 ( http://getbootstrap.com/css/#responsive-utilities ) 来实现，它具有超小、小、中、大和超大屏幕尺寸的选项。

桌面:

<img src="<?php echo base_url() ?>assets/img/types/<?php print $food_type ?>.jpg" class="img-responsive hidden-xs hidden-sm hidden-md" alt="">

移动设备(注意移动图像的输出):

<img src="<?php echo base_url() ?>assets/img/types/<?php print $food_type ?>-Mobile.jpg" class="img-responsive hidden-lg hidden-xl" alt="">

所以这两行的最终代码是:

<img src="<?php echo base_url() ?>assets/img/types/<?php print $food_type ?>.jpg" class="img-responsive hidden-xs hidden-sm hidden-md" alt="">
<img src="<?php echo base_url() ?>assets/img/types/<?php print $food_type ?>-Mobile.jpg" class="img-responsive hidden-lg hidden-xl" alt="">

这显然会增加加载时间，因为两个图像都必须加载。

另一种选择是使用 jQuery 并根据屏幕分辨率更改图像源。这只会以一种方式调整它，因此如果用户屏幕大于 768，它将从图像源中删除 -Mobile.jpg 并仅将其替换为 .jpg。但是，如果用户将浏览器窗口的大小调小，它不会还原。不过，您可以添加此功能，但我没有在此处包含它。

$(window).resize(function(){
  if ($(window).width() => 768){  
        $('.food-thumbnail img').each(function(){
            var foodImg = $(this);
            var newSrc = foodImg.attr('src').replace('-Mobile.jpg', '.jpg');
            foodImg.attr('src', newSrc);
        });
    }
});

此方法将有利于移动用户，因为图像的移动版本预计将默认加载并换出任何大于 768 像素的设备。

<img src="<?php echo base_url() ?>assets/img/types/<?php print $food_type ?>-Mobile.jpg" class="img-responsive" alt="">