Question

我有容纳图像的父容器project-img-main，然后我将高度设置为auto以匹配正确的宽度比例。如果你看下图像下面有一个小差距。我不确定是什么导致了它。我已将margin: 0添加到您在此代码段中看到的所有容器中。我也将max-height: 700px改为min和height ......没有任何效果。

有谁看到导致这种情况的原因？

#project-img-main {
	position: relative;
	margin: 0;
	width: 100%;
	height: auto;
}
#project-img-window {
	max-height: 700px;
	width: 60%;
}
#project-img-text-container {
	background: rgba(0,0,0,.7);
	position: absolute;
	width: 40%;
	height: 100%;
	left: 60%;
	z-index: 99;
	top: 0;
}
#project-img-text-block {
	text-align: center;
	position: absolute;
	top: 50%;
	left: 50%;
	-webkit-transform: translate(-50%, -50%);
	transform: translate(-50%, -50%);
}


#blue {
  background: blue;
  height: 300px;
  width: 100%;
  }

<div id="project-img-main">
	<img src="http://optimumwebdesigns.com/eslich/images/projects/project-main3.jpg" id="project-img-window" alt="Demolition and Wrecking Projects">
			<div id="project-img-text-container">
				<div id="project-img-text-block">
				</div>	
			</div>
	</div>
<div id="blue"></div>

Answer 1

将display: block添加到img标记（您的#project-img-window）

Answer 2

下面的空格是img标记和下一个div标记之后的换行符和空格的工件。这是因为img元素是内联块。最快，最简单的解决方案是将其设置为display：block;

#project-img-window {
    max-height: 700px;
    width: 60%;
    display: block;
}

图像没有占据容器的整个高度

2 个答案: