折腾：
期间，最后是用html+css自己去画对应的图片上传的内容了。
此处，已经可以通过：
.nz_tp_box{ width: 1.24rem; height: 1.24rem; position: relative; display: inline-block; float: left; margin-right: 0.5rem; // background: url(../images/nz_add_bg.png) center center no-repeat; background: url("@{env-prefix}/assets/nz_add_bg.png") center center no-repeat; background-size: 1.24rem 1.24rem; box-sizing: border-box; } .nz_tp_box img { display: inline-block; //width: 1.26rem; width: 1.24rem; height: 1.24rem; } .nz_tp_box i { position: absolute; display: inline-block; width: 0.5rem; height: 0.5rem; top: -0.25rem; right:-0.25rem; // background: url(../images/nz_close.png) no-repeat; background: url("@{env-prefix}/assets/nz_close.png") no-repeat; background-size: 0.5rem 0.5rem; } cowImageLeft: { // "isAdded" : false, "isAdded" : true, "thumbnailUrl" : "", "originUrl" : "https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1502084214262&di=3ff4eca5cc6d4c384a83e09877006772&imgtype=0&src=http%3A%2F%2Fimgsrc.baidu.com%2Fimgad%2Fpic%2Fitem%2F023b5bb5c9ea15ce94e6792cbc003af33a87b28f.jpg" }, cowImageMiddle: { "isAdded" : true, "thumbnailUrl" : "", "originUrl" : "https://timgsa.baidu.com/timg?image&quality=80&size=b10000_10000&sec=1502074137&di=79361fb1a9244c3d6d98f96fb728ce12&src=http://www.1866.tv/Upload_Map/2015nian/10/20/2015-10-20-14-02-46352.jpg" }, cowImageRight: { "isAdded" : false, "thumbnailUrl" : "", "originUrl" : "https://timgsa.baidu.com/timg?image&quality=80&size=b10000_10000&sec=1502074137&di=5acadd9bd4e0528fdd8188ada6d0c6e7&src=http://photocdn.sohu.com/20120624/Img346346458.jpg" } |
css img max-width
html – How to set max width of an image in CSS – Stack Overflow
CSS image max-width set to original image size? – Stack Overflow
html5 – Responsive image in HTML with max width/height and without CSS – Stack Overflow
【总结】
后来用：
.nz_tp_box img { max-width: 1.24rem; max-height: 1.24rem; } |
就可以，自动适配，最大宽度和最大高度了：
然后接着去：
【已解决】reactjs中当有图片时去掉背景图片且图片居中对齐
转载请注明：在路上 » 【已解决】如何通过css控制图片的最大宽度和高度