如何使销售徽章与产品图像响应

如何解决如何使销售徽章与产品图像响应

我已经使用 woocommerce 插件网站在电子商务中实现了销售徽章，但它对产品图片没有响应。我想要响应式销售徽章，当图像尺寸较小时，其销售徽章尺寸会随着产品图像尺寸的变化而自动调整。现在我正在使用但不工作的代码在移动视图中显示大的销售徽章图像大小而在桌面视图中小，如何使其对产品图像做出响应。

我正在使用此代码进行销售以显示在产品上

add_filter( 'woocommerce_sale_flash','add_percentage_to_sale_bubble' );
function add_percentage_to_sale_bubble( $html ) {
    global $product;
    $percentage = round( ( ( $product->regular_price - $product->sale_price ) / $product->regular_price ) * 100 );
    $output =' <span class="onsale">'.$percentage.'%'.'<br>'.' OFF</span>';
    return $output;
}

现在我正在使用销售徽章代码

.percentage_cart_text {

     font-size: 12px;
    font-weight: 700;
 background: transparent url(../wp-content/uploads/2021/04/sale-new1.png) no-repeat right top/contain;
        margin-left: -401px;
    width: 41px;
    padding: 1.1% 1.3% 14% 0.4%;
    margin-top: 7px;
    font-weight: 700;
    font-size: 0.775em;
}

用于购物车

add_filter( 'woocommerce_format_sale_price','woocommerce_custom_sales_price',10,3 );
function woocommerce_custom_sales_price( $price,$regular_price,$sale_price ) {
    // Getting the clean numeric prices (without html and currency)
    $_reg_price = floatval( strip_tags($regular_price) );
    $_sale_price = floatval( strip_tags($sale_price) );

    // Percentage calculation and text
    $percentage = round( ( $_reg_price - $_sale_price ) / $_reg_price * 100 ).'%';
  //  $percentage_txt = ' ' . __(' Save ','woocommerce' ) . $percentage;
 $percentage_txt = ' '.$percentage.'<br>' .'OFF';
    $formatted_regular_price = is_numeric( $regular_price ) ? wc_price( $regular_price ) : $regular_price;
    $formatted_sale_price    = is_numeric( $sale_price )    ? wc_price( $sale_price )    : $sale_price;

   if(is_cart()){
    
      echo  ' <ins>' . $formatted_regular_price.'<br><span class="percentage_text1"><span class="percentage_cart_text">'. $percentage_txt . '</span></span></ins>';
 }else{
         
    
   echo  ' <ins>' . $formatted_regular_price.'<br><span class="percentage_text1"><span class="percentage_wishlist_text">'. $percentage_txt . '</span></span></ins>';
     }
}

现在我想要与产品图片对应的销售徽章图标