Question

我一直在尝试这里和其他地方提供的各种解决方案，而且它们似乎都没有效果。我想让图像占据浏览器窗口的整个宽度，无论大小（高度按比例缩放）。但我需要将此图像放在较小的容器<div>中，因为它是动态内容的一部分（博客文章的正文）。我使用bootstrap，但我不认为这个问题是框架所特有的。代码：

<div class="container">
  <div id="content" class="col-md-8">
    {dynamic content in here}
    <!-- still part of blog post -->
    <div class="large"><img src...></div>
    {more content}
  </div>
</div>

CSS：

div.content { width: 70%; }
div.large img { width: 100%; }

如果我将<img src="..." class="large">放在容器div中，它当然会是<div>的大小。如果我手动将图像的宽度设置为1900像素，它会向远远延伸到主要内容的右侧，我必须尝试找到适当的负片margin-left以使图像居中（{{1它没有中心）。当然，这只适用于像素特定的尺寸。一旦窗口大小发生变化，该代码就会中断。

如果我设置margin: 0 auto，则图片会显示在以下任何内容之上，这不是我想要的行为。我也尝试使用jQuery这个javascript：

position: absolute;

除了没有jQuery的版本，它会迭代<script> $("div.large img").css("width", $(window).width); </script>的结果。

这些方法似乎都没有给出我想要的结果。打开和关闭容器将是一个坏主意（tm），因为这会破坏静态布局和动态内容之间的隔离，因此如果布局的静态部分发生变化且博客帖子不是，则会破坏整个网站。全部手动更新。

Answer 1

它适用于我的绝对位置

<!DOCTYPE html>
<html>
	<head>
		<style type="text/css">
			body{
				margin: 0;
			}
		
			div#small{
				width: 200px;
				background-color: green;
			}
			
			div#fullscreen{
				position: absolute;
				width: 100%;
				background-color: red;
			}
		</style>
	</head>
	<body>
		<div id="small">
			i am a small div inside your browser window
			<div id="fullscreen">
			 i got the same width as your browser window
			</div>
		</div>
        <div id="small">
			i am a small div inside your browser window
		</div>
	</body>
</html>

Answer 2

我认为你需要做这样的事情......

<div class="container">
  <div id="content">
    <div class="col-md-8 etc..."></div>
    { content in here}
    </div>

    <!-- still part of blog post -->
    <div class="large"><img src...></div>
    <div class="col-md-8 etc..."></div>
    {more content in here}
    </div>
  </div>
</div>

将.container设置为100％，将内容设置为70％，将.large设置为100％

小容器内的全屏图像

2 个答案: