画像を正方形で表示させる

2005年07月02日 雑記 #CSS

データ上は、正方形じゃないものでも、なんとか正方形に見せて表示させる事ができるようなCSSの記述をおぼえました。上の写真が下のようになります。結構、無理矢理書いてますので、ブラウザによってはダメかもしれませんけど...




フォトギャラリーでサイズが違ってデコボコしてた部分をこれでキレイに見せる事ができそうです。ちなみに以下のように書いてあります。


<div class="img" style="width:60px; height:60px;">
<img src="/dev/archives/2005/07/images/1120271492.jpg"
width="80" height="60" style="position: absolute; 
clip: rect(0px 70px 60px 10px); margin-left: -10px;"></div>

この clip を利用したimgタグは縦横のサイズが無いような扱いになるようで、それだとレイアウトするのに困るという事からdivで囲ってサイズを指定してあります。

また、センターでトリミングしてあるのでずらした分は、margin-left や margin-top をマイナス指定して位置をあわせてやらないとレイアウトが崩れます。ちょっと、スマートじゃないですが、プログラムの方で自動で出来るようなものを書いてあるので、今後は楽にできそうです。

著者写真
この記事を書いた人
山本 一道 / 有限会社アップルップル 代表

名古屋のWeb制作会社 (有)アップルップル代表。HTMLファーストな国産CMS「a-blog cms」開発・販売・サポート / 名古屋のWeb制作者コミュニティ「WCAN」主催 / コワーキングスペース「ベースキャンプ名古屋」運営。Web制作の現場をより良くするための活動をしています。

@kazumich

関連記事

この記事のハッシュタグ #CSS から関連する記事を表示しています。