BinaryDevelop
  1. ホーム
  2. html

[解決済み] 複数の画像を自動リサイズして div 内の中央に配置する方法

2022-03-04 09:02:46

質問

複数の大学ロゴの画像を並べて、ブラウザの幅が小さくなっても、上の青っぽい画像と同じように、コンテナdivからはみ出さないように縮小表示させようとしているのです。画像は、最大幅と高さ100％を適用することで、そのdiv内で拡大縮小します。しかし、ロゴ画像は同じように拡大縮小されず、divから溢れ出てしまいます。

以下に実例を示します。 http://feroze.org/new-education/ - サイズを変更してみてください。

以下は、ロゴコンテナDivのグレーバーのCSSです。 

#partners
  height 105px
  background-color #eee
  white-space nowrap
  width 100%

そして、ロゴ画像自体に適用されるCSSは以下の通りです。 

.logo-image
  vertical-align middle
  padding 13px
  max-width 100%
  display inline

ご覧の通り、グレーのバーの中で縦に並べてみました。しかし、バーが短くなるにつれて、画像は div 内にとどまり、コンテナ div に従ってサイズが変更されるようにしたいのです。

何かお手伝いいただけることがあれば、ぜひお願いします。ありがとうございます。

解決方法は？

どのようなHTMLか分かりませんが、画像をそれぞれ <div> または <li> を使用することができます。 display: table; と display: table-cell を使用することで、画像が何枚あっても、常に幅に正しく収まるようになります。 

body {
  margin: 0;
}

#partners {
  height: 105px;
  background-color: #eee;
  white-space: nowrap;
  width: 100%;
  display: table;
}

.logo-image {
  vertical-align: middle;
  padding: 13px;
  display: table-cell;
}

.logo-image img {
  max-width: 100%;
}

<div id="partners">
  <div class="logo-image">
    <img src="http://placehold.it/120x80" alt="Placeholder Image" />
  </div>
  <div class="logo-image">
    <img src="http://placehold.it/120x80" alt="Placeholder Image" />
  </div>
  <div class="logo-image">
    <img src="http://placehold.it/120x80" alt="Placeholder Image" />
  </div>
  <div class="logo-image">
    <img src="http://placehold.it/120x80" alt="Placeholder Image" />
  </div>
  <div class="logo-image">
    <img src="http://placehold.it/120x80" alt="Placeholder Image" />
  </div>
  <div class="logo-image">
    <img src="http://placehold.it/120x80" alt="Placeholder Image" />
  </div>
</div>

動作デモはこちら .

関連

最新

おすすめ

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