如果容器具有最大宽度，我如何将 img 的宽度设置为容器中的主体宽度？答案

【问题标题】：How do i set width of img to body width in container if it has max width?如果容器具有最大宽度，我如何将 img 的宽度设置为容器中的主体宽度？
【发布时间】：2025-12-20 10:30:06
【问题描述】：

.container {
  max-width: 1170px;
  margin: 0 auto;
  padding: 0 10px;
}

<div class="container">
  <h1>Test</h1>
  <p>Lorem, ipsum dolor sit amet consectetur adipisicing elit. Quod, corporis!</p>
  <img src="https://via.placeholder.com/1920x1080,jpg" alt="">
</div>

所以如果我希望 img 是身体的 100% 宽度，我该怎么做？我尝试使用 calc(-50vw + 50%) 和最大宽度为 100vw，但它会产生水平滚动条。

【问题讨论】：

标签： html css

【解决方案1】：

像这样使图像的宽度为 100%：

img#placeholder {
  width: 100%;
}

确保为图片指定 ID #placeholder。

.container {
  max-width: 1170px;
  margin: 0 auto;
  padding: 0 10px;
}

img#placeholder {
  width: 100%;
}

<div class="container">
  <h1>Test</h1>
  <p>Lorem, ipsum dolor sit amet consectetur adipisicing elit. Quod, corporis!</p>
  <img id = 'placeholder' src="https://via.placeholder.com/1920x1080,jpg" alt="">
</div>

【讨论】：

那不符合我的要求。我想要的是容器类中的 img 超出 1170px 的容器宽度，以扩展身体的整个宽度。

【解决方案2】：

如果容器是 body 中的第一个元素，那么这将起作用

使用box-sizing: border-box; 来避免水平滚动条很重要，因为您在容器上使用了填充。

* {
  box-sizing: border-box;
}

html,
body {
  height: 100%;
  margin: 0;
}

.container {
  max-width: 1170px;
  min-height: 100%;
  margin: 0 auto;
  padding: 0 10px;
}

.container img {
  position: absolute;
  left: 0;
  right: 0;
  width: 100%;
  height: auto;
  border: 0;
}

<div class="container">
  <h1>Test</h1>
  <p>Lorem, ipsum dolor sit amet consectetur adipisicing elit. Quod, corporis!</p>
  <img src="https://via.placeholder.com/1920x1080,jpg" alt="">
</div>

【讨论】：

出于以下原因投反对票：答案没有简单明了。对于这样一个简单的问题，解决这个问题的方法远非复杂。您描述的内容几乎都不是真正需要的。