html - 拉伸图像diashow中的元素

Question

我有一个元素具有不同设备的给定来源。我无法正确设置它们的样式，以便图像拉伸以填充容器，这会导致 iPhone 12 pro Max 等更大屏幕上出现空白。

如何将<source>元素中的<picture>元素设置为样式width: 100%, height: 100%;？

我已经尝试过设置display:flex;应该相当于object-fit: cover;但它不起作用。

您可以在下面看到设备上的不同结果。在第一张图片中，右侧仍有空白（iPhone 12 Pro Max）。在第二张图片上，图像完全拉伸到视口（iPhone 6/7/8）。

更新

这是我的 HTML 标记，基本上是幻灯片中的 3 个图片元素。

<div class="heroHomepageSection">
<div id="image-slider" class="splide">
    <div class="splide__track">
        <ul class="splide__list">
            <li class="splide__slide">

                <picture>
                    <source media="(min-width: 750px)" srcset="<?php echo get_stylesheet_directory_uri() ?>/inc/images/IMG_8792-min.JPG">
                    <source srcset="<?php echo get_stylesheet_directory_uri() ?>/inc/images/mobilePicture.png">
                    <img src="art-direction-vertical.jpg" alt="">
                </picture>

            </li>

            <li class="splide__slide">

                <picture>
                    <source media="(min-width: 750px)" srcset="<?php echo get_stylesheet_directory_uri() ?>/inc/images/IMG_8801-min.JPG">
                    <source srcset="<?php echo get_stylesheet_directory_uri() ?>/inc/images/mobilePicture4.png">
                    <img src="art-direction-vertical.jpg" alt="">
                </picture>

            </li>

            <li class="splide__slide">
                <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="art-direction-vertical.jpg" alt="">
                </picture>
            </li>
        </ul>
    </div>
</div>

这是我到目前为止添加的 css。

.splide__list picture{
    min-width: 100%;
    height: auto;
}

其他一切都由 splide 库设置，并且在桌面上完美运行。您也可以在这里访问该网站：https ://easy-loft.de

有人有想法吗？

标签： htmlcssimageresponsive-designsplidejs