移动时图像的不同宽度 - PHP

Question

下面您将看到，如果不是移动设备，我正在尝试为图像添加 40% 的width 。 但是，即使在桌面设备上，图像仍然以 100% 的宽度显示。 您可以在此处查看此页面： https : //www.tattiniboots.com/product/terranova/

这是我正在使用的代码

require_once 'Mobile_Detect.php';
$detect = new Mobile_Detect;

// Any mobile device (phones or tablets).
if (!$detect->isMobile()) {
    add_action('woocommerce_after_single_product_summary', 'bbloomer_add_below_prod_gallery', 5);

    function bbloomer_add_below_prod_gallery()
    {
        global $product;
        $id = $product->id;
        if ($id == 5735) {
            echo '<div class="woocommerce-product-gallery" style="padding: 1em 2em; clear:left;">';
            echo '<center><h2>MOBILE</h2></center><img src="https://www.tattiniboots.com/wp-content/uploads/2019/02/conversion-1.png">';
            echo '</div>';
        }
    }
} else {
    add_action('woocommerce_after_single_product_summary', 'bbloomer_add_below_prod_gallery', 5);

    function bbloomer_add_below_prod_gallery()
    {
        global $product;
        $id = $product->id;
        if ($id == 5735) {
            echo '<div class="woocommerce-product-gallery" style="padding: 1em 2em; clear:left;">';
            echo '<center><h2>NOT MOBILE</h2></center><img src="https://www.tattiniboots.com/wp-content/uploads/2019/02/conversion-1.png" width="40%">';
            echo '</div>';
        }
    }
}

Answer 1

在 php 文件中回显 html 是一个坏主意，无论是为了可读性还是调试。 拥有内联 css 也不是一件好事。 老实说，我建议使用媒体查询而不是移动检测，因为它不是 100% 准确的（它无法识别某些手机，您必须使其保持最新状态）。 综上所述，您是否试图将 40% 的宽度“增加”为 100% 宽度的图像？ 宽度不可能超过 100%。 您可以尝试使用“woocommerce-product-gallery”类增加周围 div 的宽度。 我还注意到这里的不一致：

if ( !$detect->isMobile() ) {
  ... 
   echo '<center><h2>MOBILE</h2></center><img src="https://www.tattiniboots.com/wp-content/uploads/2019/02/conversion-1.png">';
}

看起来它正在检查它是否不是移动的，并添加移动 img，而其他则相反。

Answer 2

我认为你选择了一个糟糕的方法来解决这个问题。最好的方法是使用 css（媒体查询）。 您不能在 html 标签宽度中使用“%”。

Answer 3

作为img标签内的属性的width总是有一个以像素为单位的值（它没有像素，就像数字一样），所以你写的方式不起作用。

如果您希望宽度的百分比值作为img标签的内联属性，您应该使用style属性。 所以你的img标签应该是这样的：

<img src="https://www.tattiniboots.com/wp-content/uploads/2019/02/conversion-1.png" style="width:40%;">

Answer 4

是的，这个解决方案是通过简单地在 CSS 中声明大小选项来解决的。 请记住，也可以在 php 中向您添加的图像添加一个类，以进一步促进此 CSS 声明