html - 如何根据屏幕大小调整经过验证的 PayPal 图像大小
问题描述
我从此处从 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"
alt="PayPal Acceptance Mark"></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" alt="PayPal Acceptance Mark"></a></td></tr></table><!-- PayPal Logo -->
</div>
从这一点开始,我添加了以下 css 样式:
.payment-secure-logo {
display: block;
height: auto;
width: auto;
max-width: 300px;
max-height: 300px;
}
此代码通过显示图像并在单击时重定向到贝宝来工作。
不幸的是,我无法调整图像大小或移动图像。
我的目标是根据屏幕大小调整图像大小,当我在移动设备中查看图像时,它会在屏幕外剪辑。
解决方案
请检查以下片段。希望能帮助到你。
.payment-secure-logo {
display: block;
height: auto;
width: auto;
max-width: 300px;
max-height: 300px;
}
.payment-secure-logo table img{width: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" alt="PayPal Acceptance Mark"></a></td></tr></table><!-- PayPal Logo -->
</div>
推荐阅读
- c# - C# Docusign API Launcher 错误 ArgumentException:必须提供“ClientId”选项。(参数'ClientId')
- python-3.x - 用于运行 Python 脚本的 Windows 任务计划程序
- spring-boot - Thymeleaf - 显示列表/集合字段时出错
- javascript - 如何使用 JQuery 切换 CSS?
- c++ - 是否可以在没有未定义行为的情况下在 C++ 中创建标记指针?
- php - 如何使用 eloquent 计算 laravel 中某个日期的工作时间?
- amazon-web-services - AWS ECS docker 容器 RDS 集成
- tensorflow - BERT + 自定义层训练性能随时期下降
- python - 如何解释 gensim 的 Word2vec 最相似方法的输出并了解它是如何得出输出值的
- tensorflow - 如何在不干扰其他优化器参数的情况下增加“tfa.optimizers.AdamW”的权重衰减