縦横比を変えずに固定サイズのサムネイル表示

Yukimi Sato 196views 更新:2015年6月22日

HTML

<a href="#"><div><img src="image01.png"/></div></a>
<a href="#"><div><img src="image02.png"/></div></a>
<a href="#"><div><img src="image03.png"/></div></a>

CSS

a div{
  position: relative;
  width: 200px;
  height: 200px;
  overflow: hidden;
}

img {
  position: absolute;
  top: -100%;
  left: -100%;
  right: -100%;
  bottom: -100%;
  margin: auto;
}

それぞれの-100%指定と、 margin: auto; 指定が鍵です。

ログイン / 新規登録してコメントする

このソースコードをストックして後で利用したり、作業に利用したソースコードをまとめることができます。

こちらもお役に立つかもしれません