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

Question

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

但我也有移动版本的图片：

目前的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中包含重定向的CSS名称。有人可以建议解决这个问题吗？

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