自定义130px×65px PayPal捐赠按钮被放大至300px×150px，如何调整回指定小尺寸？

Hey there! I totally get how frustrating it is when your button won't stay the size you set—let's fix this together.

The issue here is that PayPal's Donation SDK automatically applies default dimensions to the button image, and it overrides any size constraints you put on the parent div. Here are two reliable ways to force it to use your 130px×65px size:

1. Specify Dimensions Directly in the PayPal Button Configuration #

This is the cleanest approach, since you're telling the SDK exactly what size you want right when it renders the button. Just add width and height properties to the image object in your config:

<div id="donate-button-container"> 
  <div id="donate-button"></div> 
  <script src="https://www.paypalobjects.com/donate/sdk/donate-sdk.js" charset="UTF-8"></script> 
  <script> 
    PayPal.Donation.Button({ 
      env:'production', 
      hosted_button_id:'2HR5GGV5XJRDQ', 
      image: { 
        src:'https://pics.paypal.com/00/s/YjdjOWYxN2UtNTYyNy00MjNkLTg1YmMtNDlkZjA4NTRmZjhi/file.PNG',
        width: 130,  <!-- Your desired width -->
        height: 65   <!-- Your desired height -->
      } 
    }).render('#donate-button'); 
  </script> 
</div>

2. Override with Custom CSS #

If the first method doesn't work (sometimes SDK styles can be stubborn), you can add a CSS rule that targets the generated button image directly. This uses !important to make sure your styles take precedence:

<style>
  #donate-button img {
    width: 130px !important;
    height: 65px !important;
    max-width: 130px !important; /* Prevents unwanted scaling on larger screens */
  }
</style>

<div id="donate-button-container"> 
  <div id="donate-button"></div> 
  <script src="https://www.paypalobjects.com/donate/sdk/donate-sdk.js" charset="UTF-8"></script> 
  <script> 
    PayPal.Donation.Button({ 
      env:'production', 
      hosted_button_id:'2HR5GGV5XJRDQ', 
      image: { 
        src:'https://pics.paypal.com/00/s/YjdjOWYxN2UtNTYyNy00MjNkLTg1YmMtNDlkZjA4NTRmZjhi/file.PNG'
      } 
    }).render('#donate-button'); 
  </script> 
</div>

Why Your Original Div Fix Didn't Work #

PayPal's script dynamically creates the <img> element inside the #donate-button div, and it adds inline styles or its own CSS classes that set the default 300px×150px size. Parent div constraints don't override inline styles, so you need to target the image itself either via the SDK config or direct CSS.

Give these methods a try—either one should get your button looking exactly how you want it! 😊

内容的提问来源于stack exchange，提问作者aRivera