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  三鸡  阅读(180)  评论(0编辑  收藏  举报