Skip to content

Instantly share code, notes, and snippets.

@zjor

zjor/center-image.html

Created May 4, 2013 12:11
Show Gist options
  • Save zjor/5517319 to your computer and use it in GitHub Desktop.
Save zjor/5517319 to your computer and use it in GitHub Desktop.
Download ZIP
Center <img> inside <div> preserving image aspect ratio without knowing image size
Raw
center-image.html
<html>
<head>
<style type="text/css">
.wide-container {
width: 200px;
height: 20px;
border: 1px solid red;
text-align: center;
vertical-align: middle;
display: table-cell;
}
.tall-container {
width: 20px;
height: 200px;
border: 1px solid red;
text-align: center;
vertical-align: middle;
display: table-cell;
}
.image {
max-width: 100%;
max-height: 100%;
}
</style>
</head>
<body>
<div class="wide-container">
<img class="image" src="https://graph.facebook.com/657129580/picture?width=200&height=200">
</div>
<br/>
<div class="tall-container">
<img class="image" src="https://graph.facebook.com/657129580/picture?width=200&height=200">
</div>
</body>
</html>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment