如何用相同尺寸的矩形替換圖像

如何隱藏圖像，但保留一個邊框或不透明的矩形，圖像曾經是？掩蓋圖像也是可以接受的。如何用相同尺寸的矩形替換圖像

這必須適用於不同大小的圖像，因此硬編碼包含div的大小和設置border/bgcolor將不起作用。

我想我可以等待圖像加載，得到它的尺寸，然後將其包含的div設置爲相同的尺寸。有沒有更簡單的方法？

來源

2011-08-02 pepsi

將圖像放入容器並將其居中以模仿圖像的邊框。然後根據需要淡出圖像（此處的opacity屬性完全正常）或將其visibility屬性設置爲hidden。

這適用於任何形式的圖像，只是不設置容器的寬度和高度。使用padding來實現所需的邊界。

來源

2011-08-02 22:30:25 aefxx

很多好的答案在這裏，但我也接受你回答問題的邊界部分。順便說一下，容器可能需要設置爲顯示：inline-block才能使其具有相同的圖像大小。 – pepsi

鑑於你在URL「圖像/ opaque.gif」服務器上的1x1像素，你可以這樣做：

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

設置寬度，因此圖像不調整到1x1的高度是必要的。

來源

2011-08-02 22:28:53 Jacob

簡單的方法包括設置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'));

來源

2011-08-02 22:30:50

如果你只是想，直到圖像加載使用CSS visibility attribute保留空間和圖像的可見性設置爲hidden來取代它。

.image { 
    visibility: hidden; 
}

儘管圖像看起來不可見，但仍然會佔用空間，因此無法保持佈局不受損壞。當然，沒有圖像邊框會顯示，但我猜你只是爲了在隱藏圖像後保留佈局而不進行摺疊。

來源

2011-08-02 22:34:42 brezanac

如何用相同尺寸的矩形替換圖像

回答

相關問題