BinaryDevelop
  1. ホーム
  2. Web制作
  3. html5

HTMLでIMGをDIVコンテナのサイズに自動的に適応させる方法

2022-02-06 02:57:05

IMGを適応させるために、以下のように水平方向に適応させる例を作ってみた。

  • IMGスタイル（縦方向は自動サイズ合わせで横方向に引き伸ばす）
  • DIVスタイル（要素が中央に配置される）

IMGスタイル

(水平方向に引き伸ばされ、垂直方向に自動的にサイズマッチングされます。） 

 width:100%;
 height:auto;

(縦方向に伸縮、横方向は自動サイズ合わせ） 

 width:auto;
 height:100%;

DIVスタイル（要素が中央に配置される） 

 display:flex;
 align-items:center; 
 justify-content:center;

やり方は簡単で、対応する画像のwidthとhtightの値を具体的に設定するだけです。次の例を見てください。 

img{
 width:auto;
 height:auto;
 max-width:100%;
 max-height:100%;
}

このように設定することで、指定したスペース内で画像を拡大縮小することができます。4行の意味

  • width:auto; 画像の幅が自動的に適応されます（画像は幅のまま表示されます）。
  • height:auto; 画像の高さは自動的に調整されます（画像は高さに合わせて表示されます）。
  • width:auto;とheight:auto;を一緒に使うと、元のサイズの画像を表示することになります（何もしないと解釈してください）。
  • max-width:100%; 画像の幅は、画像が配置されているスペースの幅を越えてはいけません。
  • max-height:100%;画像の高さは、画像が配置されているスペースの高さを超えてはいけません。
  • max-width:100%;max-height:100%; 一緒に使うと、画像の最大幅と最大高さが、それがある空間の幅と高さを超えてはならないことを意味します。

サンプルコード

ここにサイズと比率の異なる2つの画像がありますが、この方法を適用すると、自動的に塗りつぶされ、中央揃えにされます。 

<html>
<head>
<title> Make images automatically fit into DIV container size</title>
<style>
ShaShiDi{
width:500px;
height:400px;
display:flex;
align-items:center;
justify-content:center;
   /* For obvious effect, you can turn the following border on and see the effect */
   /* border:1px solid black; */
}

ShaShiDi img{
 width:100%;
 height:auto;
}

</style>
</head>
<body>
 <div class="ShaShiDi">
  <img src=". /1.png"/>
 </div>
 <div class="ShaShiDi">
  <img src=". /2.png"/>
 </div>
</body>
</html>

 上記は、IMGが自動的にDIVコンテナのサイズに適応する方法の詳細は、HTMLのIMGが自動的にDIVに適応し、スクリプトの家の他の関連記事に注意を払うしてください！また、DIVのコンテナのサイズに適応する方法について説明します。

関連

最新

おすすめ

について
/
プライバシー・ポリシー
/
お問い合わせ
© 2022 BinaryDevelop. すべての権利は、それぞれの所有者に帰属します