前端自适应布局-带文字图片的自适应

最近项目中需要实现一个banner，如图所示.（设计图稿为1680*412）

当前实现的思路：

div(position:relative;width:100%;height:412px;)>ul >li>a>img (width:100%;height:412px)

问题：平铺桌面但文字会被挤压

这个时候，产品给出了一个参考效果,见链接.https://hz.fang.com/?s=BDPZ-BL。(图片尺寸2000*)总体效果是，屏幕大屏，缩放时内容不会被压缩，一直展示图片中间部分。

实现原理貌似是这个样子的:

div(position:relative;width:100%;)>a(position:absolute;margin-left:-1000px;left:49%;)>img(width:2000px;height:464px;)

使用的是自适应居中的技巧，想到一个方法

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
		<style>
			.box{
				position: relative;
				width: 100%;
				height: 412px;
				overflow: hidden;
			}
			.box p{position: absolute;top: 50%;left: 17.6%;}
			.box img{
				width: auto;/*要点*/
			    height: auto;;/*要点*/
			    max-width: 100%;;/*要点*/
			    max-height: 100%;;/*要点*/
			    min-width: 1000px;;/*要点*/
			}
		</style>
	</head>
	<body>
		<div class="box">
			<a href="">
				<img src="img/banner1.png" alt=""/>
				<p>跟随者！</p>
			</a>
		</div>
	</body>
</html>

效果：会根据窗口大小自适应宽高，图片完整显示（这种写法可以用于触屏端的页面）。但，等等，回想下产品给的参考效果，并不是宽高自适应，真正的需求效果是！！高度不变，在拉缩窗口时图片展示中间部分内容，窗口小于1200px时不动。不涉及图片本身的拉伸！！！所以，在图片上下功夫的思路是不对滴！它就应该全部展示，通过其他方式控制展示图片的内容。看到一篇文章得到启示。https://www.jianshu.com/p/a0a99e28414d

既然不是直接控制图片，我可以给它包裹div控制div的居中显示！！

试了下果然满足要求，最终代码如下:

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
		<style>
			.box2{position: relative;
				width: 100%;
				height: 412px;
				overflow: hidden;
			}
		</style>
	</head>
	<body>
		<div class="box2">
			<a href="" style="display: block;position: relative;">
				<div style="position:absolute;width: 2000px;height: 416px;left: 50%;margin-left: -1000px;">
					<img src="img/banner1.png" alt="" height="416"/>
					<p style="position: absolute;top: 50%;left: 17.6%;">跟随者！</p>
				</div>
			</a>
		</div>
	</body>
</html>

完美收工！

薛定谔的喵喵喵

发布了35 篇原创文章 · 获赞 11 · 访问量 3万+

私信关注

前端自适应布局-带文字图片的自适应

猜你喜欢