html - 制作元素拉伸以覆盖视口宽度和高度

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 专业最大。但是当我在移动设备上访问该网站时，这两件事都没有发生。

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

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

我哪里错了？

标签： htmlcsswordpresssafari