html - Firefox でサイズ変更時に画像が途切れる

Question

私は現在、ウェブサイトに取り組んでいます。Firefox で表示すると、一部の要素が切り取られていることに気付きました。問題を示す画像を添付しました。

以下の画像は、Firefox の jsfiddle スクリーンショットです。

イメージを切り取る

それを再現するコードは次の場所にあります: JSFIDDLE

これは、CSS でパーカンテージ値が設定された単なる画像です。

.image-percent {
    width: 30%;
}

奇妙なことに、バグを再現できる場合もあれば、ランダムな HTML 要素またはその他の CSS プロパティを追加した後に単に消える場合もあります。

誰かがすでにこの動作を経験しているか、回避策を知っていて、Firefox に画像のサイズを正しく変更させていますか?

score 16 · Accepted Answer

Firefox は非標準の CSS プロパティを実装しましたimage-rendering https://developer.mozilla.org/en-US/docs/Web/CSS/image-rendering

さまざまな値で遊ぶと、このソリューションは多かれ少なかれ適切な結果をもたらします。

image-rendering:optimizeQuality;

score 0 · Accepted Answer

プロパティを追加する必要がありmax-widthます。これで修正されるはずです。

.image-percent {
    width: 30%;
    max-width: 100%;
}

テスト用です。これを試して：

.image-percent {
    max-width: 100%;
    height: auto;
    width: auto;
}

それだけです。

3 に答える 3