Question

您好我有评论发布功能，公共用户可以使用

链接和显示图像

像[img] http://www.google.com/img.png [/ img]

这样的内容

问题是用户可能会链接到一个高度和宽度都非常大的图像，这个图像的高度和宽度超过了导致一些溢出布局问题的div的高度和宽度

无论如何我是否可以调整图像大小以使其仍然适合div而不会丢失宽高比？

或者我可以使用CSS之类的设置溢出来显示滚动条，如果发生这种情况吗？

Answer 1

您应该可以通过CSS将max-width和max-height应用于img。

#my_selector img
{
    max-width: 200px;
    max-height: 200px;
}

Answer 2

您可以遍历图像并确保其尺寸不高于其父元素...

var imgs = document.getElementById('container').getElementsByTagName('img'),
    parent,
    parentWidth,
    parentHeight;

for (var i = 0, length = imgs.length; i < length; i++) {
    parent = imgs[i].parentNode
    parentWidth = parent.offsetWidth;
    parentHeight = parent.offsetHeight;

    if (imgs[i].width > parentWidth) {
        imgs[i].style.width = parentWidth + 'px';
        imgs[i].style.height = 'auto';
    } else (imgs[i].height > parentHeight) {
        imgs[i].style.height = parentHeight + 'px';
        imgs[i].style.width = 'auto';
    }

}

如何调整bbcode链接图像的大小以修复当前div的高度和宽度？

2 个答案: