如何用相同大小的矩形替换图像

时间:2011-08-02 22:25:09

标签: javascript jquery css image

如何隐藏图像,但保留图像以前的边框或不透明矩形?遮盖图像也是可以接受的。

这必须适用于不同大小的图像,因此硬编码包含div的大小并设置边框/ bgcolor将不起作用。

我想我可以等待图片加载,获取它的尺寸,然后将其包含的div设置为相同的尺寸。有没有更简单的方法呢?

4 个答案:

答案 0 :(得分:2)

如果您只想在加载图片之前保留空间,请使用CSS visibility attribute并将图片可见性设置为hidden

.image {
    visibility: hidden;
}

尽管图像不可见,但仍然会占用空间,从而保持您的布局不会崩溃。当然不会显示图像边框,但我猜你这样做只是为了在隐藏图像后保留折叠布局。

答案 1 :(得分:1)

如果服务器上的URL为“images / opaque.gif”的1x1像素,则可以执行以下操作:

var theImage = $('img');
theImage
    .css({width: theImage.width(), height: theImage.height()})
    .attr('src', 'images/opaque.gif');

设置宽度和高度是必要的,因此图像不会调整为1x1。

答案 2 :(得分:1)

将图像放入容器中并将其居中以模仿图像的边框。然后根据需要淡出图片(此处opacity属性完全正常)或将其visibility属性设置为hidden

这适用于任何类型的图像,只是不要为容器设置宽度和高度。使用padding来获得所需的边框。

答案 3 :(得分:1)

简单的方法包括将CSS opacity设置为0,或visibility设置为hidden

如果您想用相同尺寸的元素替换它,那么

function hideImage(image) {
    var s = getComputedStyle(image, null);
    var w = s.getPropertyValue("width");
    var h = s.getPropertyValue("height");
    var d = document.createElement('div');
    /* do your supplementary styling, e.g. background in CSS */
    /* by default, img elements are display: inline-block;, by the way */
    d.className = 'imagecover';
    d.style.width = w;
    d.style.height = h;
    image.parentNode.replaceChild(d, image);
}

hideImage(document.getElementById('some_image_to_hide'));