CSSで画像を「サイズ変更」する方法

CSS3は画像を直接「サイズ変更」することはできませんが、メディアクエリとレスポンシブデザインの原則を使用して、画像をブラウザでサイズ変更します。

コンセプトは、画像がビューポートのサイズに応答し、画像がエッジを超えないようにすることです。ビューポートの高さが幅より大きい場合、最大幅を定義する必要があります。

以下は、いくつかのサンプルコードと、より関連する記事へのリンクです。 img.ri:emptyの使用は、子供の要素のない要素のみに一致する構造的な擬似クラスであることに注意してください（画像には子供の要素がないはずです）。これはCSS3セレクターであるため、IE8以下は宣言を解決できません。 empty

<code class="language-css">@media screen and (orientation: portrait) {
  img.ri { max-width: 90%; }
}

@media screen and (orientation: landscape) {
  img.ri { max-height: 90%; }
}</code>

レスポンシブ画像の詳細については、レスポンシブセンター画像の作成に関する詳細な情報、CSS3を使用した画像のアスペクト比の維持に関するガイド、および

プロパティに関する完全なガイドをご覧ください。 background-size CSS画像サイズの解像度の

FAQ

品質を失うことなくCSSの画像をサイズ変更するにはどうすればよいですか？

品質を失うことなくCSSの画像サイズのサイズを変更するには、正しいCSSプロパティが必要です。画像サイズは、

および

プロパティを使用してサイズを変更できます。ただし、アスペクト比を維持し、変形を防ぐために、1つのプロパティのみを指定する必要があり、もう1つはwidthに設定する必要があります。たとえば、height auto

このコードは、アスペクト比を維持しながら、コンテナの幅に合うように画像をサイズ変更し、質量を維持します。

<code class="language-css">img {
  width: 100%;
  height: auto;
}</code>

CSSイメージのサイズ変更における

属性の役割は何ですか？

cssのobject-fit属性は、コンテナに合うように画像またはビデオをサイズ変更する方法を指定するために使用されます。 5つの可能な値の値があります：

、

、object-fit、fill、contain、およびcover。 none値は、画像のアスペクト比がコンテナのアスペクト比と異なる場合に画像を変形させる可能性のあるコンテナに拡張されます。 scale-down値は、アスペクト比を維持しながら、コンテナに合うように画像をサイズ変更します。これにより、容器内に覆われていないスペースが残ります。 fill値は、画像の特定の部分をトリミングする可能性のあるアスペクト比を維持しながら、容器全体をカバーするために画像をサイズ変更します。 contain値は、画像をまったくサイズ変更しません。 coverの値は、noneまたはscale-downのように動作し、小さなものを取得します。 contain none CSSを使用して画像をレスポンシブにする方法は？

CSSで画像を応答するものにするには、値が

>

max-width属性を使用する必要があります。これにより、必要に応じて画像が収縮できますが、元のサイズを超えて拡大することはありません。たとえば、100%

<code class="language-css">img {
  max-width: 100%;
  height: auto;
}</code>

このコードは画像に応答性が高くなります。つまり、コンテナのサイズに応じてサイズを変更し、アスペクト比を維持し、変形を防ぎます。

CSSを使用して背景画像のサイズを変更するにはどうすればよいですか？

CSSの背景画像のサイズを変更し、background-size属性を使用します。 auto、cover、contain、特定のサイズなど、いくつかの値があります。 auto値は、背景画像を実際のサイズに変更します。画像を少し伸ばす必要がある場合でも、cover値は背景画像を変更してコンテナ全体をカバーします。 contain値は、画像が完全に表示されるように背景画像を変更します。特定の幅と高さに背景画像を調整するために、特定のサイズを与えることができます。たとえば、

<code class="language-css">@media screen and (orientation: portrait) {
  img.ri { max-width: 90%; }
}

@media screen and (orientation: landscape) {
  img.ri { max-height: 90%; }
}</code>

このコードは、Webページのボディ全体をカバーするために背景画像をサイズ変更します。

CSSの特定の幅と高さに画像を調整する方法は？

CSSの特定の幅と高さに画像を調整するには、widthおよびheightプロパティと特定の値を使用する必要があります。ただし、画像のアスペクト比が指定された幅と高さ比と異なる場合、これは画像を変形させる可能性があります。変形を防ぐために、1つのプロパティのみを指定する必要があり、もう1つはautoに設定する必要があります。たとえば、

<code class="language-css">img {
  width: 100%;
  height: auto;
}</code>

このコードは、アスペクト比を維持しながら、画像を幅500ピクセルに調整します。

CSSでサイズを変更した後、画像を中央に配置する方法は？

CSSでサイズを変更した後、margin属性を使用できます。これは、画像がブロックレベルの要素として表示され、auto属性とdisplay値を使用して指定できる場合に機能します。たとえば、block

このコードは、コンテナ内に画像を水平に中心にします。

<code class="language-css">img {
  max-width: 100%;
  height: auto;
}</code>

CSSの画像を伸ばすことなくサイズ変更するにはどうすればよいですか？

CSSの画像を伸ばすことなくサイズ変更し、そのアスペクト比を維持する必要があります。これは、1つの1つのみを指定し、

プロパティの1つのみを指定し、他のプロパティを

に設定することで実行できます。たとえば、width height このコードは、アスペクト比を維持しながら、容器の幅に合うように画像をサイズ変更し、ストレッチングを妨げます。 auto

CSSの画像のサイズを変更し、そのアスペクト比を維持する方法は？

<code class="language-css">body {
  background-image: url("image.jpg");
  background-size: cover;
}</code>

CSSの画像のサイズを変更し、そのアスペクト比を維持するには、

プロパティと

プロパティの1つのみを指定し、他のプロパティを

に設定する必要があります。たとえば、

width heightこのコードは、アスペクト比を維持しながら、コンテナの幅に合うように画像をサイズ変更します。 auto

画面に合わせてCSSの画像をサイズ変更するにはどうすればよいですか？

<code class="language-css">img {
  width: 500px;
  height: auto;
}</code>

画面の画像のサイズを変更して画面に合わせて、

属性の値として

（viewport width）ユニットを使用し、

（viewport height）unitsを

属性の値として使用します。 。たとえば、vw width vhこのコードは、画面のサイズに関係なく画像全体に合うように画像をサイズ変更します。 height

CSSの画像をサイズ変更して容器を埋める方法は？

CSSの画像のサイズを変更してコンテナを埋めるには、値が

>object-fit属性を使用する必要があります。たとえば、fill

<code class="language-css">@media screen and (orientation: portrait) {
  img.ri { max-width: 90%; }
}

@media screen and (orientation: landscape) {
  img.ri { max-height: 90%; }
}</code>

このコードは、画像の容器に合うように画像を伸ばします。これにより、画像のアスペクト比がコンテナのアスペクト比が異なる場合は画像が変形します。変形を防ぐために、その値が

object-fit属性を使用することができます。これは、画像の特定の部分をトリミングする必要がある場合でも、アスペクト比を維持しながらコンテナ全体をカバーするために画像をサイズ変更します。 cover

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