How can I adjust liquid code to equalize image and button size?

[CustomerStore]

Good morning,

For the liquid code of my store I would like to make sure that the size of the image above the buy now button is always equal to the size of the buy now button in all device like mobile phone and PC. How can I do?

This is my link of product page: https://www.siero24k.it/products/siero-oro-24k

this is the code: 

{% if product.handle == 'siero-oro-24k' %}
<div style="margin-bottom: -20px;">
<img src="https://cdn.shopify.com/s/files/1/0785/9758/7282/files/10_PEZZI_RIMASTI_1000_x_200_px_2.png?v=169815..." width="320" />
</div>
{% endif %}

This is the image:

 

[laddisahsi]

Hi @CustomerStore 

You can follow the following steps:

1. Please remove the width from the html.

2. Please go to the Online Store.
3. Then Edit Code.
4. Please find the theme.liquid file.
5. Please add code before closing the tag </head> tag.

<style>
#ProductInfo-template--19978242720082__main img {
    width: 73%;
}
</style>

If this solution is worked, then please Like this and Mark this as accepted solution!

Laddi

[CustomerStore]

Hi @laddisahsi 

I don't want to edit code in the theme liquid because it creates problems in my theme over time long run.

I want to edit only the liquid code and set it the same size as the buy button.

Thank you

[CustomerStore]

something like this? But seems too big 

{% if product.handle == 'siero-oro-24k' %} <div style="margin-bottom: -20px; width: 100%;"> <img src="https://cdn.shopify.com/s/files/1/0785/9758/7282/files/10_PEZZI_RIMASTI_1000_x_200_px_2.png?v=169815..." class="shopify-payment-button__button shopify-payment-button__button--unbranded BUz42FHpSPncCPJ4Pr_f jjzYeefyWpPZLH9pIgyw RWJ0IfBjxIhflh4AIrUw" /> </div> {% endif %}

[laddisahsi]

@CustomerStore 

Then  use this HTML

<img src="https://cdn.shopify.com/s/files/1/0785/9758/7282/files/10_PEZZI_RIMASTI_1000_x_200_px_2.png?v=1698154030" width="73%">

[CustomerStore]

now it's too small in mobile version

[laddisahsi]

use this css

@media only screen and (max-width: 600px) {
#ProductInfo-template--19978242720082__main img {
    width: 100% !important;
}
}

[CustomerStore]

I solved it with this code but it seems too big only in the desktop version: 

{% if product.handle == 'serum-oro-24k' %}
  <div style="margin-bottom: -20px;">
    <img src="https://cdn.shopify.com/s/files/1/0785/9758/7282/files/10_PEZZI_RIMASTI_1000_x_200_px.png?v=1698345953" style="width: 100%; height: auto;" >
  </div>
  <style>
    .button:later, .shopify-challenge__button:later, .customer button:later, .shopify-payment-button__button--unbranded:later {
      height: automatic; /* You can adjust this height according to your needs */
    }
  </style>
{% end if %}