放大预览图片不失真

1.放大预览图片不失真css设置

width: auto;height: auto;max-width: 100%;max-height: 100%;

2.100%宽度显示图片，高度自动不失真

<!--

我们将img css样式宽度设置为100%
height为自动。 将overflow设置为hidden;

imgbox不要给高度，设置为overflow:auto。图像就不再失真

请根据页面合理使用。。
-->
<style>

.imgbox{overflow:auto;}
.imgbox img{width:100%; height:auto;overflow: hidden;}

</style>

<div id = "imgbox">
          <img src="./img/product.png">
    </div>