Question

我在（Bootstrap）容器中有一个图像，我希望图像的页面宽度为100％。我无法将其带到容器外面而且我无法取走容器的填充物（因为图像周围的文字）。

我发现我可以提供图像position: absolute，但我在图像上有字幕，当我这样做时，字幕不再是它的顶部。

是否有任何其他解决方案可以强制图像“忽略”＃34;它在里面的容器的填充物？

编辑：

＆＃13;

.cooking {
	width: 421px;
	border: 0px solid;
	border-color: #779a0b;
	border-top-width: 20px;
	margin-top: 8px;
}

@media(max-width: 768px){
	.cooking {
		margin-left: -15px;
		margin-right: 15px;
		width: 787px;
	}
}

＆＃13;

<div class="container">
  <div class="row">
    <div class="col-md-7">
      <p>
      some text
      </p>
    </div>
    <div class="col-md-5 test">
      <img src="img/studenten-breiter.jpg" alt="Studenten beim Kochen" class="img-responsive cooking">
      <div class="img-titel">
        <p>
        subtitles
        </p>
      </div>
    </div>
  </div>
  <--! some more stuff -->
</div>

＆＃13;

Answer 1

我正在回答您关于＆＃39;图片的问题，该页面的宽度为100％。

您已将图像包含在<div class="col-md-5">内，这意味着图像将仅占据12个网格系统的5个部分用于中等屏幕，它不会占据页面宽度的100％。

请参阅Bootstrap grid system

另外，您已为<img class="cooking">的图片宽度{width: 421px}指定了固定值。

请更改{width:100%;}的{{1}}，并将您的图片包含在<div class="cooking">内以占据整页宽度。

如何在Bootstrap中的容器内设置100％（页面宽度）的图像？

1 个答案: