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

时间:2017-07-10 13:48:48

标签: javascript php css

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

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

目前的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名称。有人可以建议解决这个问题吗?

1 个答案:

答案 0 :(得分: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="">