响应式Woocommerce类别图像

Question

因此，在Woocommerce的模板文件content-product_cat.php中，有一些代码需要类别缩略图：

<?php
    /**
     * woocommerce_before_subcategory_title hook
     *
     * @hooked woocommerce_subcategory_thumbnail - 10
     */
    do_action( 'woocommerce_before_subcategory_title', $category );
?>

我正在使用Bootstrap，所以我需要使用img-responsive类，因为当我在移动设备上查看时，图像保持相同的大小并且看起来很糟糕。

有什么想法吗？

Answer 1

每个图像都可以转换为响应图像，无论你使用什么框架（Bootstrap，Foundation等），它都是简单的CSS规则：

<img style="width:100%" src="image.jpg"/>

我的建议是为您的图片使用自定义样式，所有这些样式或仅使用给定CSS类的图像：

img.responsive {width:100%;}

将上述代码放入主题的style.css文件中。如果希望根据窗口宽度自动调整图像，请指定responsive类。你不必执行超级魔术技巧或使用甚至第三方CSS框架来实现这一目标。