专注织梦dedecms仿站模板修改二次开发HTML5响应式模板制作!


Html/Css/Javascript

CSS让DIV按照背景图片的比例自动缩放,并让背景图片填充整个元素(附效果代码)

2021-01-08 18:51:18 admin 201
宽度按照整个屏幕的百分比来调整,但是高度,又不能通过整个屏幕的高度百分比来调整,而也想通过宽度的百分比,即宽高比希望与背景图片的宽高比相等。
<style>
*{margin:0px;padding:0px;}
.autobg{
	background-size: 100% auto; 
	background-repeat: no-repeat; 
	background-image: url(http://www.0536360.com/media/20201011184900Qr.png);
}
.autobg:before{
	content:"";
	display: block; 
	padding-top: calc((516 / 1600) * 100%);
}
.text{
	position: absolute; 
    top: 0; 
    left: 0; 
    bottom: 0; 
    right: 0; 
	width:100%; 
	height:100%;
}
</style>

<div class="autobg">
	<div class="text">
		<p>测试的文字测试的文字测试的文字测试的文字</p>
		<p>测试的文字测试的文字测试的文字测试的文字</p>
		<p>测试的文字测试的文字测试的文字测试的文字</p>
	</div>
</div>

13335251979 服务时间 9:00-22:00