html css图片实现缩放效果

<div class="photo honor_list">
            <ul>
               <li>
                    <div class="product_list_img">
                        <a href="/uploads/attachment/20201103/9122c25d9e1916deaa760b464704b588.png" target="_blank" title="实用新型专利证书一种汽车驱动桥后盖内侧焊缝焊接工装-济南冠森自动化设备有限公司">
                        <img src="/uploads/attachment/20201103/9122c25d9e1916deaa760b464704b588.png" alt="实用新型专利证书一种汽车驱动桥后盖内侧焊缝焊接工装" title="实用新型专利证书一种汽车驱动桥后盖内侧焊缝焊接工装-济南冠森自动化设备有限公司">
                      </a>
                    </div>
                    <p>实用新型专利证书一种汽车驱动桥后盖内侧焊缝焊接工装</p>
                </li>
            </ul>
        </div>

.photo li .product_list_img {
  width: 100%;
  position: relative;
  height: 200px;
}
.photo li a {
  display: block;
}
.photo li img {
  display: inline-block;
  transition: all 0.3s;
  max-width: 100%;
  max-height: 100%;
  width: auto;
  height: auto;
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate3d(-50%, -50%, 0);
  -webkit-transform: translate3d(-50%, -50%, 0);
}