1.让图片始终显示在容器内,并且居中显示,这种方法不会裁切图片
在这里插入图片描述

   .conter {
        width: 500px;
        height: 500px;
        border: 2px solid red;
        position: relative;
        margin-top: 30px;
    }

    .img {
        max-width: 100%;
        max-height: 100%;
        position: absolute;
        top: 50%;
        left: 50%;
        transform: translate(-50%, -50%);
    }

2.通过object-fit css属性 而object-fit,相当于background-size,即图片填充方式
在这里插入图片描述

 .conter {
        width: 500px;
        height: 500px;
        border: 2px solid red;
        position: relative;
        margin-top: 30px;
    }

    .img {
         width: 100%;
         height: 100%;
         object-fit: contain;
 }

在这里插入图片描述

Logo

旨在为数千万中国开发者提供一个无缝且高效的云端环境,以支持学习、使用和贡献开源项目。

更多推荐