有时候在渲染用户上传的图片时,需要根据不同图片宽高进行展示 ,若固定宽高,则会对图片一定程度的拉伸,导致图片变形,此时直接根据relation 相对位置,使图片的框和背景框动态缩放, 宽则同宽,长则同长, 直接上效果图
.srcbox-img { border: 1px solid #ddd; border-radius: 4px; width: 225px; height: auto; padding: 4px; margin: -30px 0 10px 70px; position:relative; } .imgcss-img { width: 215px; height: auto; }
<div class="col-sm-4"> <div> <div> <label class="control-label required" style="display: inline;">弹框图片</label> </div> <div class="srcbox-img" style="margin-top: 10px; margin-left: -1px"> <img id="ImgId-img" class="imgcss-img" /> </div> <small style="margin-left:0px;">图片类型说明: (png、jpg、bmp)</small><br> <small style="margin-left:0px;">图片建议说明</small> </div> </div>
标签:展示,border,缩放,height,width,背景图,图片 From: https://www.cnblogs.com/Sientuo/p/17731086.html