HTML画像が歪んでいる場合の対処法

html 画像の歪みの解決策: まず、対応する HTML ファイルを開き、次に HTML img によって導入された画像を見つけます。最後に、img 画像に「object-fit:none;」属性を追加して、画像の歪みの問題を解決します。 . .

この記事の動作環境: Windows7 システム、HTML5&&CSS3 バージョン、Dell G3 コンピューター。

CSS スタイルの幅: 100% 画像の歪み

画面は 1920 ピクセル、画像の幅を設定: 1920 ピクセルの固定サイズ、画像は歪まない、幅を設定: 100% 画像の歪み

img{
      display:block;  /*img图片比父元素高度小几个像素，设置为块元素，使得父子div高度一致*/
      width:100%;
}

画像を画面サイズに合わせて幅: 100% に設定することによって引き起こされる画像の歪みの問題を解決します。

object-fit: none;    /*保留原有元素内容的长度和宽度*/

効果が明らかでない場合は、テキスト付きの画像を選択すると、よく見えます。 シャープネスの違いがあります。

img{
      width:100%;
      max-width:100%;
      object-fit:none;
}

ただし、object-fit:none を設定した後、画面サイズが画像サイズより小さい場合、画像が表示されなくなることに注意してください。中央の位置に自動的に切り取られます。

[推奨学習: HTML ビデオ チュートリアル]

以上がHTML画像が歪んでいる場合の対処法の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。