######选择本地图片预览时。等比例缩放图片。【查了各种js不行。最后想到换种方式，用css! ok！】

最新推荐文章于 2023-01-30 11:22:08 发布

互联网cjfw

最新推荐文章于 2023-01-30 11:22:08 发布

阅读量210

点赞数

分类专栏：图片上传等比例缩放预览

本文链接：https://blog.csdn.net/qq_20597149/article/details/80455584

版权

图片上传等比例缩放预览专栏收录该内容

1 篇文章 0 订阅

订阅专栏

######选择本地图片预览时。等比例缩放图片。【查了各种js不行。最后想到换种方式，用css! ok！】

找到：https://blog.csdn.net/forrest_chen/article/details/52210093

=======

yes!

=====我的实现：【项目中用到的，上传图片素材，要实现：保持图片等比例缩放预览。】

找了3个多小时！！！换种思路：ok

 <div  style="max-width: 400px; float: left;">
                                    <span style="margin-left: 15px">引流素材<font color="red">*</font></span>
                                   <%-- 新建的时候adslotDO.id == null 素材才是必填的。--%>
                                    <input id="filed" name="originMaterialFile" type="file"  accept="image/*,application/pdf" class="ipt cc-input"  <c:if test="${adslotDO.id == null}">required</c:if>  /><br/>
                                    <%-- 编辑的时候adslotDO.id != null 不是必填的。ccAdslotMapper.updateByPrimaryKeySelective(record);就不更新materialUrl。。不需要hidden提交materialUrl--%>

                                    <span style="margin-left: 15px;margin-top: 10px;">第三方广告位ID<font color="red">*</font></span>
                                    <input type="text" name="slotId" value="${adslotDO.slotId}"  class="ipt cc-input" style="margin-top: 10px"   required   />
                                </div>

                                <%--显示的图片。--%>
                               <%-- img{
                                width: auto;
                                height: auto;
                                max-width: 100%;
                                max-height: 100%;
                                }--%>

                                <div style="width:390px;height:155px;float: left;margin-top: -41px;margin-left: 10px;    text-align: center">
                                    <img id="imgshow" src="${materialUrl}" style="width:auto;height:auto;max-width: 100%;max-height: 100%;float: left;margin-left:10px;   vertical-align: middle;" alt="">
                                </div>

======