图片在手机上没有填满整个宽度

Question

我试图让我的照片在移动设备上填满屏幕的整个宽度。对于此类问题，我已经尝试了这里建议的大部分内容，但我似乎无法实现。

这是代码。我试过将宽度更改为 100%，甚至 min-width: 100%，但它似乎不起作用。

.post-image img {
    width:360px;
    height:auto;
}

我的网站： https://www.lakadpilipinas.com/

请帮忙

Answer 1

您可以使用 100vw 在供应商宽度的 100% 上调整图像大小。

.post-image img {
width:100vw;
height:auto;
}

100% 不是屏幕宽度的 100%，而是图像或 .post-image 元素的宽度。

为了防止图像占用笔记本电脑或平板电脑屏幕的所有空间，您还可以添加

max-width: 8cm;

例如。

.post-image img {
width:100vw;
height:auto;
max-width: 8cm;
}

Answer 2

请将此代码添加到您的博客 css 代码

.post-body img { 宽度：100%；高度：自动}