Question

这是我的网址

https://firebasestorage.googleapis.com/v0/b/apartments-ea9e5.appspot.com/o/bulletinboard%2Fsample-1494577677180.jpg?alt=media&token=7a0c1ff0-1bc7-4ea9-9176-072aacc4349c

此图像的高度和宽度为225＆amp; 400

我需要高度和宽度100

这里是javascript函数

var myUrl = 'https://firebasestorage.googleapis.com/v0/b/apartments-ea9e5.appspot.com/o/bulletinboard%2Fsample-1494577677180.jpg?alt=media&token=7a0c1ff0-1bc7-4ea9-9176-072aacc4349c';

    var img = new Image();
    img.src = myUrl;
    var width;
    var height;
    img.addEventListener("load", function(){
         console.log( this.naturalWidth +' '+ this.naturalHeight )
         var imagewidth=this.naturalWidth;
         var imageheight=this.naturalHeight;
         var maxht =100;
         var maxwt = 100;
         if (imageheight > maxht || imagewidth > maxwt) 
         {
           var old_ratio = imageheight / imagewidth;
           var min_ratio = maxht / maxwt;
            // If it can scale perfectly.
            if (old_ratio === min_ratio) {
              // this.resize_image(img, maxht, maxwt);
              console.log(old_ratio);
              console.log(min_ratio);
              img.height = maxht;
              img.width  = maxwt;
              console.log("does not change height and width");
              console.log(img.src);
            }
             else {
            var newdim = [imageheight, imagewidth];
            newdim[0] = maxht;  // Sort out the height first
            // ratio = ht / wt => wt = ht / ratio.
            var old_ratio = imageheight / imagewidth;
            newdim[1] = newdim[0] / old_ratio;
            // Do we still have to sort out the width?
            if (newdim[1] > maxwt) {
              newdim[1] = maxwt;
              newdim[0] = newdim[1] * old_ratio;
            }
            //this.resize_image(img, newdim[0], newdim[1]);
            img.height = newdim[0];
            img.width  = newdim[1];
            console.log("change heigth and width");
            console.log(img.src);
            }


         }


         // width=this.naturalWidth;
         // height=this.naturalHeight;
    });

但不会改变高度和宽度。

请告诉我，感谢

Answer 1

您只能使用css属性执行此操作。下面是代码示例。

希望它会有用

img {
  max-width: 100px;
  max-height: 100px;
}

<div>
  <img src="https://firebasestorage.googleapis.com/v0/b/apartments-ea9e5.appspot.com/o/bulletinboard%2Fsample-1494577677180.jpg?alt=media&token=7a0c1ff0-1bc7-4ea9-9176-072aacc4349c">
  <div>

Answer 2

您可以使用CSS调整图片大小，如下所示：

img {
    width: 100px;
    height: 100px;
}

始终是CSS，如果你不能用这种方式解决它，那么找一种解决它的JavaScript方法..

JavaScript中的

以这种方式执行（例如），您可以按照以下方式优化代码：

function resizeIMG(w, h){
  var img = document.getElementsByTagName('img'), i=0;

  while(img.length > i) {
    img[i].style.width = w + 'px';
    img[i].style.height = h + 'px';
    i++;
  }
}

并将其称为：

resizeIMG(100, 100);

function resizeIMG(w, h) {
  var img = document.getElementsByTagName('img'),
    i = 0;

  while (img.length > i) {
    img[i].style.width = w + 'px';
    img[i].style.height = h + 'px';
    i++;
  }
}

resizeIMG(100, 100);

<div>
  <img src="https://firebasestorage.googleapis.com/v0/b/apartments-ea9e5.appspot.com/o/bulletinboard%2Fsample-1494577677180.jpg?alt=media&token=7a0c1ff0-1bc7-4ea9-9176-072aacc4349c">
<div>

Answer 3

你可以通过编写这个简单的结构和css而不拉伸图像

来做到这一点

＆＃13;

.box {
  width: 100px;
  height: 100px;
  overflow: hidden;
  display: inline-block;
}

img {
  max-width: 100%;
  height: auto;
}

＆＃13;

<div class="box">
  <img src="https://firebasestorage.googleapis.com/v0/b/apartments-ea9e5.appspot.com/o/bulletinboard%2Fsample-1494577677180.jpg?alt=media&token=7a0c1ff0-1bc7-4ea9-9176-072aacc4349c" />
</div>
<div class="box">
  <img src="https://firebasestorage.googleapis.com/v0/b/apartments-ea9e5.appspot.com/o/bulletinboard%2Fsample-1494577677180.jpg?alt=media&token=7a0c1ff0-1bc7-4ea9-9176-072aacc4349c">
</div>
<div class="box">
  <img src="https://firebasestorage.googleapis.com/v0/b/apartments-ea9e5.appspot.com/o/bulletinboard%2Fsample-1494577677180.jpg?alt=media&token=7a0c1ff0-1bc7-4ea9-9176-072aacc4349c">
</div>
<div class="box">
  <img src="https://firebasestorage.googleapis.com/v0/b/apartments-ea9e5.appspot.com/o/bulletinboard%2Fsample-1494577677180.jpg?alt=media&token=7a0c1ff0-1bc7-4ea9-9176-072aacc4349c">
</div>

＆＃13;

不调整图像大小

3 个答案: