Skip to content

Instantly share code, notes, and snippets.

@sarvar

sarvar/same-height.html

Created January 22, 2017 06:44
Show Gist options
  • Save sarvar/be1785db341be9665e8487ad01fad918 to your computer and use it in GitHub Desktop.
Save sarvar/be1785db341be9665e8487ad01fad918 to your computer and use it in GitHub Desktop.
Download ZIP
Css aspect ratio to have images of same height
Raw
same-height.html
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Css aspect ratio to have images of same height</title>
<meta name="description" content="Css aspect ratio to have images of same height">
<!-- include bootstrap -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.1/css/bootstrap.min.css">
<script>
/* item styles */
.item-image {
position: relative;
overflow: hidden;
padding-bottom: 50%;
}
.item-image img {
position: absolute;
top: 0;
bottom: 0;
left: 0;
right: 0;
margin: auto;
}
.item-content {
padding: 15px;
background: #72cffa;
}
.item-text {
position: relative;
overflow: hidden;
height: 100px;
}
/* centering styles for jsbin */
html,
body {
width: 100%;
height: 100%;
}
html {
display: table;
}
body {
display: table-cell;
vertical-align: middle;
}
</script>
</head>
<body>
<div class="container">
<div class="row">
<div class="col-xs-12 col-sm-4">
<div class="item-image">
<img src="http://placehold.it/800x400" class="img-responsive">
</div>
<div class="item-content">
<div class="item-text">
Lorem ipsum dolor sit amet, consectetur adipiscing elit.
</div>
</div>
</div>
<div class="col-xs-12 col-sm-4">
<div class="item-image">
<img src="http://placehold.it/800x500" class="img-responsive">
</div>
<div class="item-content">
<div class="item-text">
Lorem ipsum dolor sit amet, consectetur adipiscing elit.
</div>
</div>
</div>
<div class="col-xs-12 col-sm-4">
<div class="item-image">
<img src="http://placehold.it/850x600" class="img-responsive">
</div>
<div class="item-content">
<div class="item-text">
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Maecenas nec velit nulla. Cras finibus mollis dolor, ac rhoncus diam. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Proin gravida iaculis orci eget malesuada. Morbi pulvinar, purus sit amet porta laoreet, quam orci fermentum leo, in interdum ligula elit id magna. Nam justo massa, ultrices eget dictum vitae, porttitor eget eros.
</div>
</div>
</div>
</div>
</div>
</body>
</html>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment