web前端图片等比例缩放
2024-06-17HTML
web前端图片等比例缩放，附代码，简单几行搞定。
原理就是，给图片的父级一个固定的高度，然后给图片最大的宽度为容器宽度，图片的高度为容器的高度，然后给图片加一个自动调整高度，保持宽高比。
<!--选项卡-图片开始--> <section id="tab2" class="container product-details_content_title product-details_tabbc " style="display: none;"> <div class="container product-details_content_parameter_img"><img src="https://www.mornlaser.cn/wp-content/uploads/2022/02/2022021712.webp" alt=""> </div> </section> <!--选项卡-图片结束-->
/*选项卡-图片开始*/
.product-details_content_parameter_img{
width: 100%;
height: 500px;
border: 1px solid #ccc;
overflow: hidden; /* 隐藏超出容器的部分 */
display: flex;
justify-content: center; /* 图片水平居中 */
align-items: center; /* 图片垂直居中 */
}
.product-details_content_parameter_img img{
max-width: 100%; /* 图片最大宽度为容器宽度 */
max-height: 100%; /* 图片最大高度为容器高度 */
height: auto; /* 自动调整高度，保持宽高比 */
}
/*选项卡-图片结束*/ 很赞哦！ ()
