Question

我有一个div我可以追加不同尺寸的不同图像。

如何将其大小设置为与图像大小相同。

例如，如果图片的尺寸为640*480，则div尺寸相同。如果下一张图片为1024*768，则div尺寸会自动更改为1024*768

由于

Answer 1

div是一个块级元素，因此它将是全宽，使其比图像宽。要解决这个问题，您可以将div {float: left}添加到CSS中。另外，添加img {display: block}以确保图像在高度

方面与div齐平

Answer 2

使用Javascript：

function loadBackground(img) {
  newBg =                       document.createElement('IMG');
  newBg.src =                   img;

  bgContainer =                 document.getElementById('background-container');
  bgContainer.appendChild(newBg);

  newBg.onload = function() {
    imgs =                      bgContainer.getElementsByTagName('IMG');
    bgContainer.style.width =   newBg.offsetWidth;
    bgContainer.style.height =  newBg.offsetHeight;
    bgContainer.removeChild(imgs[0]);
  }
}

HTML：

<div id='background-container'>
  <img src='image0.jpg'>
</div>

<a href='javascript: loadBackground("image1.jpg");'>Image 1</a>

如何缩放div，使其大小与图像的大小相同

2 个答案: