伝統的な方法は、正方形を固定形式で書くことです。長さ=幅を直接書き、次のように固定値を書きます。 。箱{ 幅: 200ピクセル; 高さ: 200px; 背景: ピンク; 色: #666; } しかし、多くの場合、モバイルデザインでは、画像の幅はモバイルデバイスによって変わります。このとき、適応型スクエアが必要になります。 比較的単純な実装方法を 2 つ紹介します。 方法 1: CSS3 vw 単位、vw はビューポートの幅に相対的です。ビューポートは 100 単位の vw 単位に分割されます。 1vw = 1% ビューポート幅 。箱{ width: 20%; //width:20vw でも OK height: 20vw; 背景: ピンク; } 方法 2:ボックスの padding-bottom スタイルを、ボックスの padding-bottom がボックスの幅と同じになるように設定し、height = 0px に設定します。 <!DOCTYPE html> <html> <ヘッド> <メタ文字セット="utf-8"> <meta http-equiv="X-UA-compatible" content="IE=edge"> <タイトル></タイトル> <link rel="スタイルシート" href=""> </head> <スタイル> *{ マージン: 0; パディング: 0; } 。箱{ 幅: 20%; /* コンテンツによってボックスの高さが過度に伸びるのを防ぐため、高さを 0 に設定します */ 高さ: 0px; /* ボックスの高さを拡大します。 幅と同じ固定幅またはパーセンテージを設定します。 パーセンテージは親要素ボックスの幅に対する相対値です*/ パディング下部: 20%; 背景: ピンク; 色: #666; } </スタイル> <本文> <div class="box"> <p>これは自己適応型正方形です</p> </div> </本文> </html> ここでheight: 0pxと書かれていない場合、ボックス内にコンテンツがある場合、ボックスはコンテンツによって拡張されることに注意してください。 padding-bottom を padding-top に変更すると何が起こりますか? 四角の中にコンテンツがある場合、そのコンテンツは四角の外側に表示されることがわかります。これは、デフォルトのテキストが左から右、上から下に配置されているため、padding-top の後にはテキストが四角の外側に表示されてしまうためです。そのため、ここでの padding-bottom と padding-top は混在できません。 また、ボックスは height *{ マージン: 0; パディング: 0; } 。箱{ 幅: 20%; /* コンテンツによってボックスの高さが過度に伸びるのを防ぐため、高さを 0 に設定します */ 高さ: 0px; /* ボックスの高さを拡大します。 幅と同じ固定幅またはパーセンテージを設定します。 パーセンテージは親要素ボックスの幅に対する相対値です*/ パディング下部: 20%; 背景: ピンク; 色: #666; 位置: 相対的; オーバーフロー: 非表示; } p{ 位置: 絶対; 幅: 100%; 高さ: 100%; 背景: 黄色; } こうすることで、ボックスの内容が正方形を埋め尽くします。 CSS でアダプティブ スクエアを実装する方法についての記事はこれで終わりです。CSS アダプティブ スクエアの詳細については、123WORDPRESS.COM の以前の記事を検索するか、以下の関連記事を引き続き参照してください。今後とも 123WORDPRESS.COM をよろしくお願いいたします。 |
<<: Nodejs-cluster モジュールの知識ポイントの概要と使用例
背景最近、オンライン操作中に DML ステートメントを実行しました。これは絶対確実だと思っていました...
Linux シェル環境で直接呼び出すことができます。公式 Web サイトによると、Zabbix のデ...
目次Dockerコンテナのデータ量データボリュームの使用方法1: コマンド-vを使用して直接マウント...
データベーステーブルA: テーブル task_desc_tab を作成します ( id INT(11...
#docker 検索#docker プルポーター1. イメージを取得した後、中国語パッケージをダウン...
imgタグは画像を導入しますreactは実際にはjsリーダー関数を介してページをレンダリングするため...
textarea の形式は保存時にデータベースに保存できますが、表示時には /n と相互に変換できな...
実装のアイデアまず、親コンテナーを作成し、2 つの順序なしリストを使用して、柔軟なレイアウトで親コン...
Linuxバージョン: CentOS 7 [root@azfdbdfsdf230lqdg1ba91 ...
目次バイト機能使用環境プロジェクトを構築する構成vite.config.ts tsconfig.js...
Nginxの仕組みNginx はコアとモジュールで構成されています。 Nginx 自体は実際にはほと...
1. yumの紹介Yum (フルネームは Yellow dogUpdater、Modified) は...
テキストシャドウテキストシャドウ: 水平オフセット 垂直オフセット ぼかし色互換性: IE10+ &...
この記事では、libudev ライブラリを使用して hidraw デバイスにアクセスします。 lib...
Ubuntu をインストールしたばかりですが、開いたときにネットワーク接続がありませんでした。右上隅...