Question

我有一个100 * 100 <div>我想在不拉伸的情况下随机显示不同大小的图像。

注意：图片应显示为原始图片，只需调整大小以便将其放入框中

Answer 1

也许这种风格会对你有所帮助：

div {
   position:relative;
}

div img {
   max-width:100%;max-height:100%;
}

Answer 2

这是一个简单的函数来计算纵横比并缩小图像大小。它采用文件的路径和图像的原始宽度和高度。你可以提供你认为合适的所有东西。 'myElement'将是您图片元素的ID。

function loadImage(filename, width, height) {

    var aspect = width / height;
    var w, h;

    if (width > height) {
        w = 100;
        h = Math.round(100 / aspect);
    }
    else {
        h = 100;
        w = Math.round(100 * aspect);
    }

    var element = document.getElementById('myElement');
    element.src = filename;
    element.style.width = w + 'px';
    element.style.height = h + 'px';
}

以固定大小div显示图像

2 个答案: