画像を同じサイズの矩形で置き換えるにはどうすればいいですか？

Question

どのように画像を隠すことができますか？画像のマスキングも受け入れられます。

これは異なるサイズの画像では機能するため、divのサイズをハードコーディングしてborder/bgcolorを設定すると機能しません。

画像が読み込まれるのを待って寸法を取得してから、含まれているdivを同じ寸法に設定することができました。しかし、簡単な方法はありますか？画像は1x1のにサイズを変更しないように、幅と高さを設定する

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

が必要です：

Answer 1

画像をコンテナに入れ、画像の境界線を模倣するように中央に置きます。次に、好きなように画像をフェードアウトします（ここではopacityのプロパティは完全に問題ありません）。visibilityプロパティをhiddenに設定します。

これはどのような種類の画像でも機能し、コンテナの幅と高さを設定しないでください。希望する罫線を実現するには、paddingを使用します。

Answer 2

URL「画像/ opaque.gif」でのサーバー上の1x1ピクセルを考えると、あなたはこれを行うことができます。

Answer 3

簡単な方法は、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')); 

Answer 4

あなただけのイメージが使用CSS visibility attributeをロードしhiddenに画像の視認性を設定されるまで、スペースを保持したい場合はどのように、同じ大きさの要素とそれを交換したい場合。

.image { 
    visibility: hidden; 
} 

あなたのレイアウトが崩壊するのを見えなくしても、画像はまだスペースを占有します。もちろん、画像の枠線は表示されませんが、画像が隠された後に折りたたまれないようにレイアウトを保持するためにのみこれを実行していると推測しています。