CSS画像の歪みに対処する方法

CSS 画像の歪みの解決策: 1. 対応する CSS ファイルを開きます; 2. 「object-fit:none;」を設定して、元の要素コンテンツの長さと幅を保持します。

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

CSS 画像が歪んでいる場合はどうすればよいですか?

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

画面は 1920 ピクセル、img の幅を 1920px に固定サイズに設定すると、画像は歪んでいない場合は、幅: 100 % に設定してください。画像の歪み

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

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

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

効果は明ら​​かではありませんが、テキスト付きの画像を選択できます。これは非常に簡単です。明瞭さの違いを見るのは良いことです。

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

ただし、object-fit:none を設定した後は、画面サイズが画像サイズより小さい場合、画像は自動的に中央位置で切り取られます

関連拡張:

1990 年、ティム バーナーズ リーとロバート カイリオは共同で Web を発明しました。 1994 年に、Web は実際に実験室から誕生しました。

HTML の発明以来、スタイルはさまざまな形で存在してきました。さまざまなブラウザーが独自のスタイル言語を組み合わせて、ユーザーがページ効果を制御できるようにします。元の HTML には、いくつかの表示属性しか含まれていませんでした。

HTML の成長に伴い、ページ設計者の要件を満たすために、HTML には多くの表示機能が追加されました。しかし、これらの機能が増えるにつれて、HTML はますます複雑になり、HTML ページはますます肥大化していきます。そこでCSSが誕生しました。

Hakun Lee は 1994 年に CSS の最初の提案を提案しました。当時、Bert Bos は Argo というブラウザを設計していたので、一緒に CSS を設計することにしました。

実は、当時のインターネット業界ではスタイルシート言語の統一に関する提案はいくつかありましたが、「カスケード」という豊かな意味を含んだスタイルシート言語はCSSが初めてでした。 CSS では、1 つのファイル内のスタイルを他のスタイル シートから継承できます。読者は、ある場所では自分の好みのスタイルを使用し、他の場所では著者のスタイルを継承または「カスケード」することができます。この階層化されたアプローチにより、作成者と読者の両方が独自のデザインを追加し、誰もが好むものを組み合わせることができる柔軟性が得られます。

Ha Kun は 1994 年にシカゴで開催されたカンファレンスで初めて CSS を提案しました。CSS は 1995 年の www network カンファレンスで再び提案されました。Boss は CSS をサポートする Argo ブラウザの例をデモンストレーションしました。Haken はまた、CSS のサポートをデモンストレーションしました。アリーナブラウザ。

同年、W3C 組織 (World WideWeb Consortium) が設立され、CSS のクリエイティブなメンバー全員が W3C ワーキング グループとなり、CSS 標準の開発に全力を尽くし、ついにカスケード スタイル シートの開発に至りました。正しい道で。 Microsoft の Thomas Reaxdon など、参加するメンバーはますます増え、その努力は最終的に Internet Explorer ブラウザーでの CSS 標準のサポートにつながりました。 Ha Kun 氏、Persia 氏などがこのプロジェクトの主要な技術リーダーです。 1996 年末に CSS の初稿が完成し、同年 12 月にカスケード スタイル シートの最初の正式な標準 (Cascading Style Sheets Level 1) が完成し、w3c の推奨標準となりました。

1997 年初頭、CSS を担当する W3C ワーキング グループは、初版でカバーされていない問題について議論し始めました。議論の結果、1998 年 5 月に発行された CSS 仕様の第 2 版が形成されました。

推奨学習: 「css ビデオ チュートリアル 」

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