<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>无标题文档</title>
<style type="text/css">
*{
padding:0;
margin:0;
}
#big{
width:100%;
height:3750px;
clear:both;
overflow:hidden;
}
.d1{
width:50%;
height:40%;
background-image:url(vocaloid/wallhaven-lme2rq_3935x6217.png);
background-size:cover;
display:table-cell;
text-align:center;
vertical-align:middle;
position:relative;
float:left;
word-wrap:break-word;
overflow:hidden;
}
.d2{
width:50%;
height:40%;
background-image:url(vocaloid/wallhaven-nk5ey1_1100x1760.png);
background-size:cover;
display:table-cell;
text-align:center;
vertical-align:middle;
position:relative;
float:right;
overflow:hidden;
}
img{
position:absolute;
top:50%;
left:50%;
transform:translate(-50%,-50%);
}
.h2{
color:#F00;
}
.h3{
color:#3F0;
}
.d1:hover,.d1:active{
background-image:url(vocaloid/wallhaven-p8jg29_2160x3840.png);
background-size:cover;
background-repeat:no-repeatl;
}
.d2:hover,.d2:active{
background-image:url(vocaloid/wallhaven-vgdvx3_1080x1920.png);
background-size:cover;
background-repeat:no-repeatl;
}
</style>
</head>
<body>
<div id="big">
<div class="d1"><img class="p1" src="vocaloid/无标题12.png"><h1 class="h2">新版(请点击OSU!)</h1>
</div>
<div class="d2"><img class="p2" src="vocaloid/无标题12.png"><h1 class="h3">旧版(请点击OSU!）</h1>
</div>
</div>
</body>
</html>
如果问题的存在是因为主盒子设计得太大，请问如何把盒子缩小然后保持背景图不变？
