object-fit: contains を使用して画像のサイズを適切に変更する方法

object-fit: contain と画像のサイズ変更について

CSS object-fit: contains を使用してフレックスボックス コンテナ内で画像を応答性を持たせる場合、このプロパティが画像の幅にどのように影響するかを理解することが重要です。画像のサイズを変更しても、レイアウトでは元の画像サイズが保持されるため、スクロールバーが表示される場合があります。

object-fit: contains では、画像全体が保持されたまま指定されたコンテナ内に収まるように、画像は比例的に拡大縮小されます。そのアスペクト比。これにより、画像が完全に表示され、トリミングが回避されます。ただし、必ずしもコンテナの幅に合わせて画像のサイズが変更されるわけではありません。

これに対処するには、コンテナの CSS width プロパティを、画像に必要な特定の値またはパーセンテージに設定する必要があります。

たとえば、次の HTML:

<code class="html"><div class="container">
  <img src="image.jpg" />
</div></code>

と次の CSS がある場合:

<code class="css">.container {
  width: 50%;
  height: 50%;
}

img {
  object-fit: contain;
}</code>

画像は比例して拡大縮小されます。 .container 内に収まるように調整されますが、画像の幅は元のサイズのままになります。コンテナの幅に合わせるには、.container の幅をパーセンテージまたは絶対値で指定できます。

<code class="css">.container {
  width: 100vw;  // 100% of the viewport width
}

// or

.container {
  width: 500px;  // 500 pixels
}</code>

覚えておいてください、object-fit: contains は画像がコンテナ内に表示されることを保証するだけですトリミングなしで。特にコンテナの幅に合わせて画像のサイズを変更する必要がある場合は、それに応じてコンテナの width プロパティを設定する必要があります。

以上がobject-fit: contains を使用して画像のサイズを適切に変更する方法の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。