css实现图片的居中、拉大和缩小
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>
效果图