向Dom设置尺寸添加元素

Question

在.html文件中，我有这样的东西

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

在.js文件中，我想将img元素添加到id='previewImg' div中

 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;
}

我将max height和hight设置为div，我认为加载的图像也将具有max-height和max-width尺寸，但是加载的图像超出了div的界限。 我的问题是如何使加载的图像具有较小或相等的div尺寸？ 如何自定义加载的图像以区分尺寸？ 原始img具有500x400像素和div尺寸过大。

Answer 1

div或div的css没什么问题，但是，如果要更改图像的大小，为什么不尝试编写一个可在带有PreviewImg的div中的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;
}