Question

当我水平缩小浏览器时，我需要'slide'元素按图像缩小，因此“内容”部分可以向上移动到图像位置的正下方。我需要html代码保持原样。

 

#body{
    background:red;
    height:500px;	
}
#slide{
	width:100%;
	display:flex;
	position:relative;
	height:500px;
	overflow:hidden;
	background:red;
}
#videoSlide{
	position:absolute;	
	max-width:100%;		
	z-index:0;
	transform: translateY(-20%);	
}
#videoSlide img{
	width:100%;
}
#content{
	width:100%;
	height:50px;
	background:yellow;
}

  
  	
<html>
<head>
	<link href="style.css" rel="stylesheet">
	<link href='https://fonts.googleapis.com/css?family=Patua+One' rel='stylesheet' type='text/css'>
	<link href='https://fonts.googleapis.com/css?family=Open+Sans' rel='stylesheet' type='text/css'>
</head>
<body>
	<header>		
	</header>
	<section id="body">	
		<section id="slide">
			<div id="videoSlide">
				<img src="https://images2.alphacoders.com/209/209140.jpg"/>
			</div>				
		</section>
		<section id="content">			
		</section>
	</section>
	<footer>
	</footer>
</body>
</html>

根据布局，部分不会向上移动

0 个答案: