Skip to content

Instantly share code, notes, and snippets.

@semicolon
Last active October 25, 2016 08:25
Show Gist options
  • Save semicolon/cc6c82e30e197fb9a809b94099ab7446 to your computer and use it in GitHub Desktop.
Save semicolon/cc6c82e30e197fb9a809b94099ab7446 to your computer and use it in GitHub Desktop.
ボックスサイズにあわせて上下左右センターに画像を表示する CSS。画像の比率やサイズに関係なく中央に配置します。
.image-wrap {
display: table-cell;
width: 200px;
height: 200px;
text-align: center;
vertical-align: middle;
line-height: 0;
border: 1px solid #999;
}
.image-wrap img {
width: auto;
height: auto;
max-width: 200px;
max-height: 200px;
margin: 0 auto;
line-height: 1;
}
@media screen and (max-width: 376px){
.image-wrap {
width: 100%;
height: 25vw; /* ここは適宜… */
}
.image-wrap img {
width: 100%;
height: auto;
max-width: 100%;
max-height: 100%;
}
}
@semicolon
Copy link
Author

Codepen にデモを置きました。

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment