2

widthまたはheightプロパティがCSSによって改ざんされた場合、これらのスタイルをキャンセルして、HTML属性から寸法を再度読み取るように画像に指示するにはどうすればよいですか？

widthとの初期値はheightですがauto、明示的に設定しても機能しません。

img {
  height: 200px;
}

/* ... */

img {
  height: auto;
}

画像がHTML属性を完全に無視するようにするだけです。

4

3 に答える 3

4

heightに を設定する初期 CSS にアクセスできる場合はimg、CSS3 ブラウザーの場合、次のように変更できます。

img:not([width]):not([height]) {
    height: 200px;
}

画像に または のいずれかの属性がある場合は、 を使用してそれを:not「適用しない」ようにします。この fiddle で結果を確認できます。これは、属性が上記の CSS よりも優先されることを常に意味します。次に、実際に CSS を介して変更を適用したい場合は、次のようにクラスまたは何かを に適用する必要があります。widthheightimg

<img src="blah" class="specialCase" />

img.specialCase {
    height: 200px;
}

このフィドルが示すように、設定でheightはなく上書きします。width

于 2013-01-03T17:25:47.433 に答える
4

残念ながら、要素をその HTML 表示属性にフォールバックさせるために、この方法で CSS ルールをキャンセルすることはできません。これは、プレゼンテーション属性が CSS ルールにマップされる際の優先順位が非常に低いため、セレクターを含む CSS ルールでさえ*永続的にオーバーライドされるためです。

プロパティを初期値に設定しても、本質的に何もキャンセルされません。仕様で規定されているデフォルト値に設定し、他のルールと同様にカスケードに参加するルールを作成するだけです。この特定のケースでheight: autoは、HTML 属性と以前の CSS ルールによって最初に提供された値を上書きするだけなので、設定は機能しませんauto。

考えられる代替手段の 1 つは、JavaScript を使用してドキュメントのスタイルシートから問題のある宣言を削除することですが、それが実際に機能するかどうかはわかりません。試したことはありません。

于 2013-01-03T16:58:55.337 に答える
2

幅と高さを に設定するとinitial元の画像サイズになりますが、残念ながらこれはWebkit (Chrome/Safari) に限定されているようです。

例jsfiddle

img {width: 50px;height: 50px;}
img {width:initial;height:initial;}

</p>

于 2013-01-03T17:14:14.150 に答える