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>

效果图

posted @ 2023-10-25 09:59  三鸡  阅读(117)  评论(0)  编辑  收藏  举报