CSS
 Computer >> コンピューター >  >> プログラミング >> CSS

CSSオブジェクトフィットプロパティ値

CSSのobject-fitプロパティは、コンテナに合わせて画像や動画のサイズを変更するために使用されます。次の値があります

  • 含む： コンテンツはそれに合わせてスケーリングされます
  • カバー： フィットするようにクリップ
  • 塗りつぶし： コンテンツボックスに入力します。

例

次のコードを実行して、cover値を使用してobject-fitプロパティを実装してみてください。

<!DOCTYPE html>
<html>
   <head>
      <style>
         .myimg {
            width:250px;
            height:350px;
            object-fit:fill;
         }
      </style>
   </head>
   <body>
      <h2>SWIFT</h2>
      <img class = "myimg"
         src = "https://www.tutorialspoint.com/assets/videos/courses/67/images/course_67_image.png"
         alt = "Python Data Science" width = "300" height = "200">
   </body>
</html>

  1. CSS：オブジェクトフィット

    CSSプロパティobject-fitは、要素をそのコンテナの幅と高さの範囲内にスケーリングします。背景画像は、このプロパティを使用する開発者として遭遇する最も一般的な要素です。 object-fitプロパティには5つの可能な値があります。さまざまな値を説明するための例として、画像を使用します。 object-fit：contain – containsを使用すると、コンテナ（この場合は画像）に入る要素のアスペクト比が維持されます。比率が一致しない場合は、比率が一致しない側にバーが表示されます（ワイドスクリーンビデオがリリースされたとき、古いテレビでは画面の上下にバーが表示され

  2. CSS空白プロパティ

    空白プロパティを使用して、要素内の空白を操作します： 例 <!DOCTYPE html> <html>    <head>       <style>          p.demo1 {             white-space: normal;          }         &nbs