如何根据屏幕大小调整经过验证的 PayPal 图像大小

Posted 2023-02-22

【中文标题】如何根据屏幕大小调整经过验证的 PayPal 图像大小

【英文标题】：How to resize a verified PayPal image based on screen size

【发布时间】：2020-05-13 14:40:02

【问题描述】：

我已从here 的 PayPals 网站复制以下代码：

<!-- PayPal Logo --><table border="0" cellpadding="10" cellspacing="0" align="center"><tr><td 
align="center"></td></tr><tr><td align="center"><a href="https://www.paypal.com/webapps/mpp/paypal- 
popup" title="How PayPal Works" 
onclick="javascript:window.open('https://www.paypal.com/webapps/mpp/paypal- 
popup','WIPaypal','toolbar=no, location=no, directories=no, status=no, menubar=no, scrollbars=yes, 
resizable=yes, width=1060, height=700'); return false;"><img 
src="https://www.paypalobjects.com/webstatic/mktg/logo/AM_SbyPP_mc_vs_dc_ae.jpg" border="0" 
></a></td></tr></table><!-- PayPal Logo -->

在这里，我为代码分配了一个 div 类（“payment-secure-logo”）：

<div class="payment-secure-logo">
<!-- PayPal Logo --><table border="0" cellpadding="10" cellspacing="0" align="center"><tr><td 
align="center"></td></tr><tr><td align="center"><a href="https://www.paypal.com/webapps/mpp/paypal- 
popup" title="How PayPal Works" 
onclick="javascript:window.open('https://www.paypal.com/webapps/mpp/paypal- 
popup','WIPaypal','toolbar=no, location=no, directories=no, status=no, menubar=no, scrollbars=yes, 
resizable=yes, width=1060, height=700'); return false;"><img src="Images/paypal-visa-mc-logos- 
500px.png" border="0" ></a></td></tr></table><!-- PayPal Logo -->
</div>

从这一点开始，我添加了以下 css 样式：

.payment-secure-logo 
display: block;
height: auto; 
width: auto; 
max-width: 300px;
max-height: 300px;

此代码通过显示图像并在单击时重定向到贝宝来工作。 不幸的是，我无法调整图像大小或移动图像。

我的目标是根据屏幕大小调整图像大小，当我在移动设备中查看图像时，它会在屏幕外剪辑。

【参考方案1】：

请查看以下代码段。希望对您有所帮助。

.payment-secure-logo 
display: block;
height: auto; 
width: auto; 
max-width: 300px;
max-height: 300px;


.payment-secure-logo table imgwidth:100%

<div class="payment-secure-logo">
<!-- PayPal Logo --><table border="0" cellpadding="10" cellspacing="0" align="center"><tr><td 
align="center"></td></tr><tr><td align="center"><a href="https://www.paypal.com/webapps/mpp/paypal- 
popup" title="How PayPal Works" 
onclick="javascript:window.open('https://www.paypal.com/webapps/mpp/paypal- 
popup','WIPaypal','toolbar=no, location=no, directories=no, status=no, menubar=no, scrollbars=yes, 
resizable=yes, width=1060, height=700'); return false;"><img src="https://www.paypalobjects.com/webstatic/mktg/logo/AM_SbyPP_mc_vs_dc_ae.jpg" border="0" ></a></td></tr></table><!-- PayPal Logo -->
</div>

【参考方案2】：

当视口低于某个宽度时调整 div 的大小：

.payment-secure-logo 
        display: block;
        width: 30vw;
        height: auto;
        max-width: 300px;
        max-height: 300px;
    
@media only screen and (max-width: 1300px) 
    .payment-secure-logo 
        width: 80vw;