最新消息:20210816 当前crifan.com域名已被污染,为防止失联,请关注(页面右下角的)公众号

【已解决】如何通过css控制图片的最大宽度和高度

CSS crifan 3143浏览 0评论

折腾:

【已解决】ReactJS中如何上传照片和查看照片

期间,最后是用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控制图片的最大宽度和高度

发表我的评论
取消评论

表情

Hi,您需要填写昵称和邮箱!

  • 昵称 (必填)
  • 邮箱 (必填)
  • 网址
84 queries in 0.202 seconds, using 22.21MB memory