使 <picture> 元素拉伸以覆盖视口的宽度和高度

Question

我现在很困惑。

基本上，我在项目中使用幻灯片幻灯片进行整页英雄幻灯片。由于图片的比例不适用于手机，我决定将图片改成这样：

 <picture>
    <source media="(min-width: 750px)" srcset="<?php echo get_stylesheet_directory_uri() ?>/inc/images/IMG_8793-min.JPG">
    <source srcset="<?php echo get_stylesheet_directory_uri() ?>/inc/images/mobilePicture3.png">
    <img src="<?php echo get_stylesheet_directory_uri() ?>/inc/images/IMG_8793-min.JPG" alt="">
 </picture>

效果很好，图片也加载好了。

现在我的问题如下：

在移动设备上，图片不会像在桌面设备上那样拉伸覆盖。另外我不知道，紫色的指示是什么？

当我为图片元素设置 display:flex; 时，devtools 向我显示，该图片正在填充 12 pro Max 上的剩余空间，但在 iphone 8 上没有。当我删除它时，devtools 向我显示，图片是在 iphone 12 pro Max 上拉伸的。但是当我在移动设备上访问网站时，这两件事都没有发生。

我也尝试过 width: -webkit-fill-available，但令我困惑的是，当时图片在 iPhone 12 pro Max 上被拉伸，但在 iphone 8 上变小（？）。

图片为 375x812 像素。它应该覆盖的 iPhone 12 pro Max 是 428x926px。

我哪里出错了？