Question

我有一个名为＆＃39; imgSlide＆＃39;里面有一个图像。我将图像宽度设置为100％，因为我需要使用导航器大小重新缩放。现在，当我使用＆＃39;转换＆＃39;属性，我向上移动图像，然后它留下一个空间。

Image to explain better my problem even more

我想知道如何删除空格，以便下面的部分（黄色条）可以向上移动。

我想要一个纯粹的css解决方案但是，如果绝对没有办法让它只用css，我想知道如何以其他方式解决这个问题。

PD：我不想在容器高度上使用像素或ems，因为当我收缩导航器时我需要容器重新缩放。

编辑：我上传了新图片，我认为它正确地解释了我正在寻找的内容。

＆＃13;

 

#slide{		
	transform: translateY(-20%);	
}
#imgSlide img{
	display:block;
	width:100%;
}
#content{		
	height:50px;
	background:yellow;
}

＆＃13;

<body>
	<header>		
	</header>
	<section id="body">	
		<section id="slide">
			<div id="imgSlide">
				<img src="https://images2.alphacoders.com/209/209140.jpg"/>
			</div>				
		</section>
		<section id="content">			
		</section>
	</section>
	<footer>
	</footer>
</body>

＆＃13;

Answer 1

如果我理解你的问题，你可以将图像和内容包装在＆＃34;容器中＃34;。然后在这个新容器上应用转换。这意味着您将转换包含图像和内容的容器。我为你做了一个小例子：https://jsfiddle.net/7ye5q8ke/2/

HTML：

<body>
   <div id="container">

      <section id="slide">
         <div id="imgSlide">
            <img src="https://images2.alphacoders.com/209/209140.jpg"/>
         </div>             
      </section>

      <section id="content">            
      </section>

   </div> <!-- Div Container END -->

</body>

CSS：

#slide{     

}
#imgSlide img{
    display:block;
    width:100%;
}
#content{       
    height:50px;
    background:yellow;
}

#container{
  transform: translateY(-20%);
}

编辑：

注意到小提琴不起作用。更新小提琴

编辑2：

在你的评论中，你要问的是它在语义上是否正确，但不是。如果部分＆＃34;内容＆＃34;实际上是用于图像标题，图像描述等，它们应该在同一部分内。 section属性用于将主题相关的内容组合在一起。意思是＆＃34;内容＆＃34;应该在＃34;滑动＆＃34;部分内。像这样：

<section id="slide">
   <div id="imgSlide">
      ...
   </div>
   <div id="content">
   </div>
</section> <!-- Section slide ends -->

现在图像内容和图像都在同一部分。应该是语义正确的。查看此链接http://oli.jp/2009/html5-structure1/

当我使用＆＃39; transform＆＃39;时，容器大小与内容不同。

1 个答案: