There are some questions that are properly similar, but i can't relate it to my specific situation.
I have created a responsive thumbnail grid with 4-to-3-to-2 columns structure (in percentages 25%-33,33%-50%).
I'm using a fake placeholder image of 500x330px for testing, but i would like to have a fixed thumbnail placeholder (css code?) with a responsive 500x330 ratio and maintain the aspect radio of the images placed in centered (vertical and horizontal) the placeholder thumbnail.
In the fiddle example i've made some thumbnails in photoshop that have a 500x330px size and within different portrait and landscape sizes so it isn't really a portrait of landscape image, but it gives a idea what i want to achieve. I hope someone understands my question and can help me out or guide me through.
<div class="col-4">
<a class="thumb" href="#">
<img src="img/test2.jpg">
<div class="caption">Project untitled<br> Category</div>
</a>
</div>
I think This is the result you are trying to acheive.
I added a div.img-wrapper around each thumb and some css magic
<div id="container">
<div class="col-4">
<div class="img-wrapper"> <a class="thumb" href="#">
<img src="http://mintywhite.com/wp-content/uploads/2012/10/fond-ecran-wallpaper-image-arriere-plan-hd-29-HD.jpg">
<div class="caption">Project untitled<br> Category</div>
</a>
</div>
</div>
<div class="col-4">
<div class="img-wrapper"> <a class="thumb" href="#">
<img src="http://fakeimg.pl/500x330/ccc/">
<div class="caption">Project untitled<br> Category</div>
</a>
</div>
</div>
<div class="col-4">
<div class="img-wrapper"> <a class="thumb" href="#">
<img src="http://www.gettyimages.com/CMS/Pages/ImageCollection/StaticContent/image1_%20164248809.jpg">
<div class="caption">Project untitled<br> Category</div>
</a>
</div>
</div>
<div class="col-4">
<div class="img-wrapper"> <a class="thumb" href="#">
<img src="http://fakeimg.pl/500x330/ccc/">
<div class="caption">Project untitled<br> Category</div>
</a>
</div>
</div>
<div class="col-4">
<div class="img-wrapper"> <a class="thumb" href="#">
<img src="http://fakeimg.pl/500x330/ccc/">
<div class="caption">Project untitled<br> Category</div>
</a>
</div>
</div>
<div class="col-4">
<div class="img-wrapper"> <a class="thumb" href="#">
<img src="http://upload.wikimedia.org/wikipedia/commons/f/f5/Poster-sized_portrait_of_Barack_Obama.jpg">
<div class="caption">Project untitled<br> Category</div>
</a>
</div>
</div>
<div class="col-4">
<div class="img-wrapper"> <a class="thumb" href="#">
<img src="http://fakeimg.pl/500x330/ccc/">
<div class="caption">Project untitled<br> Category</div>
</a>
</div>
</div>
<div class="col-4">
<div class="img-wrapper"> <a class="thumb" href="#">
<img src="http://fakeimg.pl/500x330/ccc/">
<div class="caption">Project untitled<br> Category</div>
</a>
</div>
</div>
</div>
.col-4 {
position: relative;
float: left;
display: inline-block;
}
.col-4:after {
padding-top: 63%;
display: block;
content:'';
}
.img-wrapper {
position: absolute;
top: 0;
bottom: 0;
right: 0;
left: 0;
/*fill parent*/
}
.img-wrapper .thumb {
height:100%;
.img-project img, .thumb img {
position:relative;
top:50%;
left:50%;
max-width:100%;
max-height:100%;
-webkit-transform:translate(-50%,-50%);
-moz-transform:translate(-50%,-50%);
-ms-transform:translate(-50%,-50%);
-o-transform:translate(-50%,-50%);
transform: translate(-50%,-50%);
}
/************************************************
Site Name:
Author:
************************************************/
html {
margin: 0;
padding: 0;
}
body {
font-family: regular, helvetica, arial, sans-serif;
font-weight: normal;
font-size: 18px;
line-height: 1.4;
text-transform: none;
letter-spacing: 0;
color: #111;
overflow-y: scroll;
}
body, input, textarea, select, button {
text-rendering: optimizeLegibility;
-webkit-font-smoothing: subpixel-antialiased;
-moz-osx-font-smoothing: grayscale;
}
:hover {
-webkit-transition: all 0.3s;
-moz-transition: all 0.3s;
-ms-transition: all 0.3s;
-o-transition: all 0.3s;
transition: all 0.3s;
}
b, strong {
font-weight: normal;
}
a, a:visited {
color: #111;
text-decoration: underline;
-webkit-tap-highlight-color: rgba(0, 0, 0, 0);
-webkit-tap-highlight-color: transparent;
}
h1, nav {
font-size: 27px;
font-weight: normal;
text-transform: uppercase;
text-decoration: none;
letter-spacing: 2px;
background-color: transparent;
}
h1 {
margin: 0 0 26px 0;
}
p {
margin: 0 0 16px 0;
background-color: transparent;
}
p a:hover, a:focus, a:active {
color: #111;
text-decoration: none;
}
h1 a, a:visited {
color: #111;
text-decoration: none;
}
h1 a:hover, a:focus, a:active {
color: #111;
text-decoration: underline;
}
/************************************************
Thumbnails - Columns - Content
************************************************/
#container {
display: block;
margin: 98px 10px 100px 10px;
overflow: hidden;
background-color: transparent;
}
.col-4 {
position: relative;
float: left;
display: inline-block;
}
.col-4 {
width: 25%;
}
.col-4:after {
padding-top: 63%;
display: block;
content:'';
}
.img-wrapper {
position: absolute;
top: 0;
bottom: 0;
right: 0;
left: 0;
/*fill parent*/
}
.img-wrapper .thumb {
height:100%;
}
.img-project, .thumb {
display: block;
padding: 10px;
}
.img-project img, .thumb img {
position:relative;
top:50%;
left:50%;
max-width:100%;
max-height:100%;
-webkit-transform:translate(-50%,-50%);
-moz-transform:translate(-50%,-50%);
-ms-transform:translate(-50%,-50%);
-o-transform:translate(-50%,-50%);
transform: translate(-50%,-50%);
}
.thumb:hover img {
opacity: 0.2;
}
.caption {
position: absolute;
opacity: 0;
width: 80%;
padding: 0;
top: 50%;
left: 50%;
text-align: center;
background-color: transparent;
-webkit-transform: translateX(-50%) translateY(-50%);
-moz-transform: translateX(-50%) translateY(-50%);
transform: translateX(-50%) translateY(-50%);
-webkit-transition: all 0.3s;
-moz-transition: all 0.3s;
-ms-transition: all 0.3s;
-o-transition: all 0.3s;
transition: all 0.3s;
}
.col-4 a:hover .caption {
opacity: 1;
}
/************************************************
Media queries
************************************************/
@media all and (max-width: 1024px) {
h1, nav {
font-size: 22px;
}
#container {
margin: 89px 7px 100px 7px;
}
.img-project, .thumb {
padding: 7px;
}
}
@media all and (min-width: 769px) {
nav ul {
display: block !important;
}
}
@media all and (max-width: 768px) {
body {
font-size: 16px;
}
.col-4 {
width: 33.33333%;
}
}
@media all and (max-width: 479px) {
.col-4 {
width: 50%;
}
}
I may have calculated the aspect ratio as 1: 0.63 a bit wrong. You should play with the padding-top
of the :after
element to achieve the needed ratio
As you asked added the padding - Fiddle
I just removed it from .thumb
class and added it to .img-wrapper
class.