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

Question

我有这个 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（宽度较小）以使其在小型设备上工作。

有什么想法吗？

Answer 1

既然你问了最佳实践，答案是使用srcset，见：https://developer.mozilla.org/en-US/docs/Learn/HTML/Multimedia_and_embedding/Responsive_images#Resolution_switching_Different_sizes

Answer 2

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

Answer 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;
}
}

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

SweerAlert2 - How to change responsive image in alert

javascript

jquery

css

responsive-design

screen-resolution