html css图片实现缩放效果

html

<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>

css

.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);
}