Question

在.html档案中，我有类似这样的事情

<div [hidden]="visible">
    <div id='previewImg'></div>
</div>

在.js文件中的

我想将img元素添加到div id='previewImg'

 onClick() {
    this.listImage = this.imageService.getImage();
    let mySpan = document.createElement('span');
    mySpan.innerHTML = ['<img class="thumb" src="', this.listImage[0],
      '" title="', '"/>'
    ].join('');
    window.setTimeout(function() {
        document.getElementById('previewImg').appendChild(mySpan).style.border = "3px solid";
    }, 0);
  }

还将样式css设置为div

div#previewImg {
    border: 3px solid salmon;
    max-height: 200px;
    max-width: 200px;
}

我将最大高度和高度设置为div，我认为加载的图像也将具有最大高度和最大宽度尺寸，但加载的图像超出了div边界。我的问题是如何使加载的图像具有更小或相等的维度div？如何自定义加载的图像到diva尺寸？原始的img有500x400像素和被删除的div维度。

Answer 1

div的div或css没有任何问题，但是如果你想改变图像的大小，为什么不尝试编写一个用于预览Img的img标签的css？

//it is always better to use classes for applying css properties
div#previewImg img {
  border: 3px solid salmon;
  max-height: 200px;
  max-width: 200px;
}

将元素添加到Dom设置维度

1 个答案: