はてなブックマーク - CSS＋αで縦横混在の長方形画像を、正方形枠でセンタリングさせる方法 : Media Technology Labs (MTL) : メディアテクノロジーラボ　ブログ

CSS＋αで縦横混在の長方形画像を、正方形枠でセンタリングさせる方法 : Media Technology Labs (MTL) : メディアテクノロジーラボ　ブログ

mtl.recruit.co.jp

タグ : css tips webデザイン web制作 webdesign 画像 *あとで読む design image センタリング

コンピュータ・IT 62 users

フナミタカオです。今回は、プチネタですが、左のキャプチャーのように、縦横比は同じだけど、縦向き、横向きの画像が混在するときに、正方形の枠のセンターに配置してならべるにはどうすればいいかという、チップスです。たとえば、ホットペッパー Webサービスでも、画像のURLをサイズ別に５種類返していますが、正方形のものはなく、縦向きと横向きが混在しています。縦横どちらがくるかは、画像のurlだけでは、わからないけれど、表示時に正方形枠に納まってくれれば、レイアウトもやりやすくなりますよね。できれば、CSSだけ... > このページを見る

最終更新時間: 2008年04月03日07時42分

▼ブログで紹介する

みんなのブックマーク人気（0）新着

Okky css, web制作, webdesign, tips
センタリングひとつでも大変だ・・・ 2011/01/17
mtbtaizo webデザイン
画像の並べ方。縦のセンタリング 2010/12/08
townmeet webデザイン, CSS
垂直水平センタリング※ただし調整用の透明画像必須 2010/05/21
LittleLoro
CSS＋αで縦横混在の長方形画像を、正方形枠でセンタリングさせる方法 : Media Technology Labs (MTL) : メディアテクノロジーラボ　ブログ 2010/03/31
aroe css, graphic, solution, try, webdesign
縦方向センタリングのアイデアもあり 2009/11/03
wackey CSS
縦方向のセンタリング 2009/03/29
suttang CSS, HTML
なるほど。確かにそうだ。 2008/08/06
june29 css
コメント欄や他の方の意見も参考に 2008/05/01
maRk css
何か大変そう。 / 縦長のほうは正方形にトリミングして揃えるとかではだめなのかな 2008/04/19
nilab css
CSS＋αで縦横混在の長方形画像を、正方形枠でセンタリングさせる方法 : Media Technology Labs (MTL) : メディアテクノロジーラボ　ブログ : 正直、こうまで苦労しなきゃいけないCSSってどうよ、、、という気がしてる 2008/04/11
netfan css, tips
縦横センタリング 2008/04/09
iRSS
divでがんばらないで、Tableで済ます方法もある。自動生成なら、まあ、どちらでも、いいか。 2008/04/04
marhythm *
あとでやる？かも 2008/04/04
kasane_yuuhi css, tips, webDesign, webCreation, image, これはいい
まとめでサンプルタグ｜最後に br { clear: both; } を付けて回り込みを解除すること｜縮小画像のサムネイルを並べる時に使えそう？ 2008/04/04