如何让图片铺满div宽度？仅可通过CSS/JS修改

既然没法修改HTML结构，咱们用CSS或者JS就能搞定这个问题，我给你准备了两种方案，按需选用就行：

CSS方案（优先推荐） #

这是最直接的处理方式，给博客里的图片加几个样式就能去掉左右留白。你可以把这段代码添加到网站的自定义CSS区域（比如主题设置里的「自定义CSS」面板，或者通过插件注入）：

/* 精准定位博客板块的图片，记得把.blog-section换成你网站实际的博客容器类名 */
.blog-section img {
  width: 100% !important;
  max-width: 100% !important;
  display: block !important;
  margin: 0 !important;
  padding: 0 !important;
}

代码说明： #

• width: 100% !important：强制图片宽度占满父容器的全部空间
• max-width: 100% !important：防止图片尺寸过大时超出容器边界
• display: block !important：消除图片默认inline-block属性带来的额外间隙
• margin: 0 !important 和 padding: 0 !important：去掉图片自身可能带的内外边距

如果发现图片铺满后比例失调，你可以额外加上 object-fit: cover;（会裁剪图片保持比例，铺满容器）或者 object-fit: contain;（保持比例但可能上下留白），根据你的需求调整。

JS方案（当CSS优先级不够时用） #

如果图片带有内联样式导致CSS不起作用，就用JS来强制修改样式。把这段代码添加到页面的脚本区域（比如主题的自定义HTML模块，或者通过代码插件注入）：

// 获取博客板块内的所有图片，替换.blog-section为你网站实际的容器类名
const blogImages = document.querySelectorAll('.blog-section img');

blogImages.forEach(img => {
  // 修改图片自身样式
  img.style.width = '100%';
  img.style.maxWidth = '100%';
  img.style.display = 'block';
  img.style.margin = '0';
  img.style.padding = '0';
  
  // 额外处理图片的父容器，如果父容器有padding也会导致留白
  const parentContainer = img.parentElement;
  if (parentContainer) {
    parentContainer.style.padding = '0';
    parentContainer.style.margin = '0';
  }
});

小提示： #

你可以通过浏览器开发者工具（按F12）查看元素，找到博客板块和图片的实际类名，替换代码里的.blog-section即可。

内容的提问来源于stack exchange，提问作者Wiriz