resize和overflow实现拉大和缩小，绝对定位+transform实现剧中，max-height和max-width限制图片不能超出div的范围
<html>
<head>
<style>
#div{
background-color: antiquewhite;
height: 300px;
position: relative;
resize: both;
overflow: hidden;
}
.block{
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%,-50%);
background-color: orange;
}
.div-img{
max-width: 100%;
max-height: 100%;
}
</style>
</head>
<body>
<div id="div">
<div class="block" >日子，要的是知足；生活，要的是幸福；生命，要的是健康；做人，要的是骨气；做事，要的是尽心；人生，要的是无悔。珍惜身边的幸福；欣赏自己的拥有。</div>
<img src="../image/Legend.jpg" class="block div-img" >
</div>
</body>
</html>
效果图
