Blog

HOME > Web > css > 【CSS】画像をそろえるためのCSS

【CSS】画像をそろえるためのCSS

2015/09/17

css

ECCUBEでは、指定した画像サイズとアップした画像によって、
縦長、横長、正方形とバラバラに画像がアップされます。

そのまま表示すると一覧がガタガタになるため、
すべて正方形の枠に収めるためのCSSです。

ECCUBEだけではなく、Wordpressの画像表示でも応用できます。

HTML

<div class="image-outer">
    <div class="vertical_middle">
      <img src="image.jpg">
    </div>
</div>

CSS

div.image-outer {
    background-color: #ffffff;
    display: table;
    height: 100px;
    min-height: 100px;
    width: 100px;
}

div.image-outer div.vertical_middle {
    display: table-cell;
    text-align: center;
    vertical-align: middle;
}

div.image-outer div.vertical_middle img {
    border: 5px solid #fff;
    max-height: 90px;
    max-width: 90px;
    width: auto;
}

サイズは任意で設定してください。



カテゴリー

月間アーカイブ

«前の記事

一覧に戻る

次の記事»

最近の投稿

人気の記事

MORE

ミュージシャンズ・プラザ

神社仏閣ホームーページ制作

ホームページ制作問合せ