SweetAlert2 - 如何更改警报中的响应图像

Posted 2023-05-08

【中文标题】SweetAlert2 - 如何更改警报中的响应图像

【英文标题】：SweerAlert2 - How to change responsive image in alert

【发布时间】：2020-01-11 08:47:05

【问题描述】：

我有这个 SweetAlert2 javascript：

$(document).ready(function()

swal.fire( position: 'center', customClass: 'swal-height', showConfirmButton: false, 
width: 600, padding: 150, background: '#fff url(../custom/media/misc/IMAGE1.jpg) 
no-repeat', backdrop: 'rgba(10, 10, 10, 0.65)', timer: 10000 ); 

);

此脚本在桌面屏幕上运行良好 - 但由于 IMAGE1 有 600x600 像素 - 它对于移动设备来说会很大。

然后我需要将图像更改为 IMAGE2（宽度较小）以使其适用于小型设备。

有什么想法吗？

【参考方案1】：

由于您询问最佳实践，答案是使用 srcset，请参阅：https://developer.mozilla.org/en-US/docs/Learn/html/Multimedia_and_embedding/Responsive_images#Resolution_switching_Different_sizes

【讨论】：

tks @nowres-rafed！帮我很多！ :D

【参考方案2】：

您不需要两个单独的图像，您只需将max-width:100% 添加到图像元素即可。那么无论width设置什么，它都不会超过屏幕宽度的100%。

【讨论】：

嗨@gindev，首先，感谢您宝贵的时间来帮助我。我会试试这个，很快就会回来反馈。 :D

【参考方案3】：

我找到的最佳解决方案：

通过 JavaScript 拆分屏幕分辨率并为小型设备添加 CSS 控件

$(document).ready(function()

if (screen.width > 800) 
swal.fire( position: 'center', customClass: 'swal-height', showConfirmButton: false, 
width: 600, padding: 150, background: '#fff url(../custom/media/misc/IMAGE2.jpg) 
no-repeat', backdrop: 'rgba(10, 10, 10, 0.65)', timer: 10000 ); 

if (screen.width >= 800) 
swal.fire( position: 'center', customClass: 'swal-height', showConfirmButton: false, 
width: 600, padding: 150, background: '#fff url(../custom/media/misc/IMAGE1.jpg) 
no-repeat', backdrop: 'rgba(10, 10, 10, 0.65)', timer: 10000 ); 

);

和CSS：（sweetalert2要求通过css控制高度）

.swal-height 
    height: 600px;
    width: 600px;


@media (max-width: 800px) 
  .swal-height 
    height: 300px;
    width: 300px;