画像のサイズが変わっても縦横比を変えずに枠に合わせて拡大させる

 

記事の一覧表示など、同じサイズの枠をたくさん並べる時に、画像のサイズでどんなものが来ても枠に合わせて取り繕ってくれる呪文を習ったので備忘メモ。

 

まず、表示するimageはspanでくくって、background-imageで画像を指定します。

 

<span class="クラス名" style="background-image:url(画像場所);" alt=""></span>

 

こうすることのメリットは、この後widthやheightを指定するときに、imgタグだとその横幅や縦幅を縦横比を考えずに引き伸ばしてしまうためです。

 

続いて、スタイルで以下を指定します。

 

display: block;  *widthとheightはblock要素でないと指定できないため

width: 100%;

height: 100%;

background-size: cover;  

background-position: center center;

 

こうすることで、画像のサイズがえらく縦に長かったり、横に長かったりしたとしても

枠に合わせて真ん中よせで表示してくれるようです。

 

思っていたよりずっと奥が深い、CSS

 

 

 

それにしても、備忘と打つたびに「美貌」と変換されるのは、変換間違いで笑いを取るということをmacが勧めてくれているのでしょうか。(多分取れないし)

美貌って言葉、そうそう使わない気がするのですが。

美貌よりは、備忘だろう。