コミュニティ 学ぶ ツールライブラリ レジャー
検索
日本語
ホームページ > ウェブフロントエンド > jsチュートリアル > 適応可能な画像サイズを実現する方法

適応可能な画像サイズを実現する方法

一个新手
リリース： 2017-09-20 09:50:25
オリジナル
3677 人が閲覧しました


画像サイズの適応

ブートストラップを介して画像適応を簡単に実装できます:

<img src="..." class="img-responsive" alt="Pic">
ログイン後にコピー

ブートストラップを参照する予定がない場合は、純粋な CSS を介して、ブートストラップで img 応答クラスの定義を表示できます:

.img-responsive {    
    display: inline-block;    
    height: auto;    
    max-width: 100%;}
ログイン後にコピー

このようにして、純粋な CSS を使用した画像の調整が完了しました。
コードを説明します。display により、画像を制限された形式で表示でき、幅と高さを設定できます。
次に、max-width を使用して設定します。幅 (他のクラスのペアをカバーできる) タグの幅属性の設定により、画像の適応性が高まり、逆に設定することもできますが、一般的にはこれがより頻繁に起こります。

以上が適応可能な画像サイズを実現する方法の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。

関連ラベル：
写真 サイズ
ソース：php.cn
前の記事：jsを使用してアップロードされたファイルのサイズを取得する方法 次の記事：vue-cli のカスタム パス エイリアス アセットと静的フォルダーの違い
このウェブサイトの声明
この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。
著者別の最新記事
最新の問題
子ウィンドウは親ウィンドウを操作しますが、出力は応答しません。 最初の 2 つの文は実行可能ですが、最後の文は実装できません。
から 2024-04-19 15:37:47
0
1
1361
ApacheのどこにCustomLogディレクティブを配置すればよいですか 私はphp:7.2-apachedockerを使用しています。ヘルスチェック URL ログイン アクセス ログを無効にする必要があります。このリンクに基づいて、Customlog ...
から 2024-04-06 22:03:59
0
1
990
クエリと式は、新しい列を含むテーブル全体を形成します。新しい列は、他の条件列の値を含む式です。 編集: 式は「値」列、つま​​りカテゴリに基づいて最も低い user_id を持つ「値」列である必要があります。カテゴリ「A」の最も低い「user_id」の「value」列が 0....
から 2024-04-06 21:23:40
0
2
530
Javafx でインライン CSS スタイルを動的に変更する アプリケーションが最大化されているときにペインの背景画像を変更しようとしています。私の背景はインライン CSS を使用して設定されています。スタイル用に 2 つの異なる変数と if...
から 2024-04-06 20:57:16
0
1
487
MySQL: 「<ここの変数またはサブクエリ> として...からテキストを選択します」 次のデータを含む次のテーブルがあります: id text language 1 german text german 2 english text english 私が望むのは、次...
から 2024-04-06 19:25:54
0
2
529
関連トピック
詳細>
人気のおすすめ
人気のチュートリアル
詳細>
関連するチュートリアル
人気のおすすめ
最新のコース
最新のダウンロード
詳細>
ウェブエフェクト
公式サイト
サイト素材
フロントエンドテンプレート