動態展示縮放背景圖

           有時候在渲染用戶上傳的圖片時，需要根據不同圖片寬高進行展示 ，若固定寬高，則會對圖片一定程度的拉伸，導致圖片變形，此時直接根據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>