content：url（）はFirefoxで動作しません:: before/::それを修正しないで

Question

私はHTML/CSSの学習を始めましたが、ここで時々議論された問題に遭遇しました。私の問題を解決するように見えるので、私は何が間違っているのだろうかと思っています。

コンテンツ：url（）をCSSで使用したいと思っています。

この問題を検索した後、溶液をhereを言及し、他のスレッドに（が挙げられる：前）、を設定高さ/幅を効果的にしかしと、画像を示す画像が表示されることができるが、完全無視そのオリジナルサイズ。 「：URL（）背景画像」が、問題が残っている

もにそれを変更しようとしています。高さ/幅が受け入れられないのはなぜですか？私はここでは無知だ。

<div id="logo"></div> 

CSS：

#logo { 
    content: url(images/asspreto.png); 
    height: 90px; 
    width: 168px; /*only had height set, but tried to put width as well to see if it worked. It doesn't */ 
    float: right; 
    vertical-align: middle; 
} 

#logo:hover { 
    content:url(images/assazul.png); 
    cursor: pointer; 
} 

Answer 1

#logo:before { 
 
    background: url("https://www.gravatar.com/avatar/732637806aee1bf98e7ef1f3658db84a?s=328&d=identicon&r=PG&f=1")no-repeat; 
 
    height: 200px; 
 
    width: 100%; /*only had height set, but tried to put width as well to see if it worked. It doesn't */ 
 
    float: right; 
 
    vertical-align: middle; 
 
    content:""; 
 
    height:300px; 
 
    width:300px; 
 
    position:absolute; 
 
    top:0; 
 
    left:0; 
 
} 
 
#logo{position:relative;}

<div id="logo"></div>

Answer 2

あなたがイメージが使用可能なスペースに収まるようにしたい場合は、あなたがそう指定する必要があります。 background-size指示文を使用してこれを行うことができます。イメージが使用可能なスペースに収まるように、アスペクト比を維持するには、containを使用します。

ここは例です。イメージがどのようにスケーリングされ、要素全体を満たしていないかを見ることができます。ここで

#logo { 
 
    width: 400px; 
 
    height: 300px; 
 
    background-image: url('https://placehold.it/500?text=500x500, but scaled'); 
 
    background-position: center; 
 
    background-repeat: no-repeat; 
 
    background-size: contain; 
 
    border: 1px solid #000; 
 
}

<div id="logo"></div>

Answer 3

私の解釈です：あなたはcontent: url()経由でのレンダリングに供給されたメディアの寸法を変更することはできません。しかし、仕様には言及されていませんが、擬似要素の助けを借りてメディアを配置すると、寸法を設定するだけでは機能しません。

私は自分自身は、この上でビットを実験し、これは私が思い付くものです：http://codepen.io/rahul_arora/pen/GWvNgJ

あなたは、単純なメディアは、それはそのを取るなどheight、width、object-fit、と擬似要素を使用して挿入サイズを変更することはできませんoverflowだけがそのオーバーフローを隠すのに役立ちます。

擬似要素の助けを借りて実際にこれを行うには、画像をbackgroundとして使用する方法があります。私はあなたのためにそれを解くことを願っています

.logo { 
 
    position: relative; 
 
    height: 90px; 
 
    width: 168px; 
 
} 
 

 
.logo:after { 
 
    position: absolute; 
 
    top: 0; 
 
    left: 0; 
 
    content: ""; 
 
    background: url(https://unsplash.it/g/200/200?image=1062) 0 0 no-repeat/cover; 
 
    height: 100%; 
 
    width: 100%; 
 
} 
 

 
.logo:hover:after { 
 
    background-image: url(https://unsplash.it/200/200?image=1062); 
 
}

<div class="logo"></div>

。乾杯！