Bootstrapの画像コンポーネントとアウトラインコンポーネントについて話しましょう

青灯夜游

リリース： 2021-11-19 19:32:33

転載

2321 人が閲覧しました

この記事では、Bootstrapの画像コンポーネントとアウトラインコンポーネントについて学び、レスポンシブ画像、画像サムネイル、画像タグ、アウトライン(図)について紹介します。 . !

Bootstrapの画像コンポーネントとアウトラインコンポーネントについて話しましょう

1 画像

このセクションでは、画像が応答動作をサポートするようにする方法 (親要素の範囲を超えないように) とその方法を学習します。クラス (class) を使用するにはスタイルを追加します。

1.1 レスポンシブ画像

Bootstrap が提供する .img-fluid クラスを通じて、画像がレスポンシブレイアウトをサポートするようにします。原則として、画像に max-width: 100%; and height: auto; を指定して、親要素に合わせて拡大縮小するようにします。 [関連する推奨事項: "bootstrap チュートリアル "]

nbsp;html>

  
    <meta>
    <meta>
    <meta>
    <meta>
    <link>
    <title>图片演示</title>
  
  
        <div>

            <img  alt="Bootstrapの画像コンポーネントとアウトラインコンポーネントについて話しましょう" >

        </div>
   
     <script></script>

ログイン後にコピー

上記のコンテナーは、画像を中央に配置し、四方に余白を付けて切り取るものです。これは画像コンポーネントの一部ではありません。次のとおりです。デモビデオです。

Bootstrapの画像コンポーネントとアウトラインコンポーネントについて話しましょう

10.1.2 画像サムネイル

一般クラスによって提供されるボーダー半径に加えて、.img-thumbnail を使用して、画像のサムネール幅 1px の円形の境界線が表示されます。

<!doctype html>
<html lang="zh-CN">
  <head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <meta name="keywords" content="">
    <meta name="description" content="">
    <link href="bootstrap5/bootstrap.min.css" rel="stylesheet">
    <style>
      .div1{width: 300;  height: 300px;text-align: center;padding-top: 50px;}
    </style>
    <title>图片演示</title>
  </head>
  <body>
            <div class="div1">
                 <img src="pic/taohua.jpg"  width="50%" class="img-thumbnail" alt="点击查看大图">
            </div>
   
     <script src="bootstrap5/bootstrap.bundle.min.js" ></script>
  </body>
</html>

ログイン後にコピー

このコンポーネントも応答性がありますが、スクリーンショットのみを提供しました。上記の CSS スタイルは、画像が端に近づかないようにするためのもので、境界線が表示されません。実際には、コンテナを直接使用する場合も同様です。これは、コンテナもコンテナの一部であると誰もが思わないように、コンテナを使用しないためです。

Bootstrapの画像コンポーネントとアウトラインコンポーネントについて話しましょう

1.3 pict タグ

picture 要素は、1 つ以上のsource 要素と img 要素をメディアと組み合わせて使用します (メディアクエリ)。画面に合わせたサイズに応じて異なる画像が表示されます。一致しない場合、またはブラウザがpicture属性をサポートしていない場合は、img要素が使用されます。picture要素にはソースがいくつ指定されても、1つのみです。そのうちの、または画像が表示されます。

この要素を使用して <img alt="Bootstrapの画像コンポーネントとアウトラインコンポーネントについて話しましょう" > に複数の <source> 要素を指定する場合は、必ず .img-* クラスを # # に追加してください。 <picture> 要素またはソース要素の代わりに #<img alt="Bootstrapの画像コンポーネントとアウトラインコンポーネントについて話しましょう" > 要素を使用します。

ソース要素は順番に配置されています。メディアクエリ値は、max-width の場合は小さいものから大きいものの順に並べ替えられ、min-width の場合は大きいものから小さいものの順に並べ替えられます。以下はソースコードですが、ソースコード中のjsコードは比較として画面幅を取得するものです。

<!doctype html>
<html lang="zh-CN">
  <head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <meta name="keywords" content="">
    <meta name="description" content="">
    <link href="bootstrap5/bootstrap.min.css" rel="stylesheet">
    <title>图片演示</title>
  </head>
  <body>
        <div class="container">
            <p>
                <span id="info"></span>
                <script>
                getwidth();
                window.onresize = function(){
                    getwidth();
                }
                function getwidth(){
                document.getElementById("info").innerHTML="宽度："+document.documentElement.clientWidth+"，高度："+document.documentElement.clientHeight;
                }
                </script>
                    </p>
            <picture>
                <source media="(max-width: 600px)" srcset="pic/girl1.jpg">
                <source media="(max-width: 700px)" srcset="pic/girl2.jpg">
                <img  src="pic/taohua.jpg" class="img-thumbnail" alt="Bootstrapの画像コンポーネントとアウトラインコンポーネントについて話しましょう" >
            </picture>

            <picture>
                <source media="(min-width: 700px)" srcset="pic/girl1.jpg">
                <source media="(min-width: 600px)" srcset="pic/girl2.jpg">
                <img  src="pic/taohua.jpg" class="img-thumbnail" alt="Bootstrapの画像コンポーネントとアウトラインコンポーネントについて話しましょう" >
            </picture>
        </div>
   
     <script src="bootstrap5/bootstrap.bundle.min.js" ></script>
  </body>
</html>

ログイン後にコピー

以下はデモです

Bootstrapの画像コンポーネントとアウトラインコンポーネントについて話しましょう