如何在手机上边到边显示图像答案

【问题标题】：How to display images edge to edge on mobile如何在手机上边到边显示图像
【发布时间】：2021-06-04 19:37:20
【问题描述】：

我正在尝试在移动设备上边对边显示图像。问题是容器的最大宽度设置为 90%。因此，我使用自定义 CSS 创建了以下类，用于我希望在移动设备屏幕的边缘到边缘显示的图像：


@media only screen and (max-width: 768px)
.my-full-width-feature-image {
    width: 100vw;
    position: relative;
    left: 50%;
    right: 50%;
    margin-left: -50vw;
    margin-right: -50vw;
}

我的问题是上面的 CSS 代码也使 figcaption 边到边显示。有没有办法只将我的类应用于 img 元素？

我已经尝试过“.my-full-width-feature-image img”，但这似乎也不起作用。

以下是 HTML 在我的 WordPress 网站上的排列方式。


<figure class="wp-block-image size-large my-full-width-feature-image">
<img width="780" height="520" src="https://nomadandinlove.com/wp-content/uploads/swapfiets_review.jpg" data-src="https://nomadandinlove.com/wp-content/uploads/swapfiets_review.jpg" alt="swapfiets bike sharing bicycle with blue tire in berlin with cherry blossoms in the background">
<figcaption>Cherry blossom hunting in Berlin with our monthly bike rental, Swapfiets</figcaption>
</figure>

【问题讨论】：

标签： html css wordpress

【解决方案1】：

经过进一步调查，我发现我有一个插件将我所有的 img 元素放在一个 div 元素中。

所以我只需要按如下方式更改我的自定义代码：


@media only screen and (max-width: 768px)
.my-full-width-feature-image div {
    width: 100vw;
    position: relative;
    left: 50%;
    right: 50%;
    margin-left: -50vw;
    margin-right: -50vw;
}

现在只有 div 中的 img 元素边到边显示，而 figcaption 元素保持不变。

【讨论】：