Is it possible to set a consistent size for thumbnails while still preserving the aspect ratio?

There are several questions that are somewhat similar, but I can't quite connect them to my specific situation.

I managed to create a responsive thumbnail grid with a structure of 4-to-3-to-2 columns (25%-33.33%-50%).

Currently, I am using a placeholder image sized at 500x330px for testing purposes. However, I would prefer to have a fixed thumbnail placeholder (perhaps through css code) with a responsive 500x330 ratio that maintains the aspect ratio of the images placed in the center (both vertically and horizontally) of the thumbnail.

In the provided fiddle example, I created some thumbnails in Photoshop with both portrait and landscape sizes under the dimensions of 500x330px. This may not perfectly represent a true portrait or landscape image, but it gives an idea of what I am trying to achieve. Hopefully, someone can understand my question and provide guidance on how to accomplish this task.

--> Fiddle

<div class="col-4">
    <a class="thumb" href="#">
        <img src="img/test2.jpg">
        <div class="caption">Project untitled<br> Category</div>
    </a>
</div>

htmlcssthumbnailsaspect-ratio

Answer №1

Check out this link for the desired outcome.

I have enclosed each thumbnail in a div.img-wrapper and applied some CSS styling.

HTML

<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>

Modified CSS

.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%);
}

Complete CSS Styling

/************************************************
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%;
    }
}

UPDATE 1

It seems I may have slightly miscalculated the aspect ratio as 1:0.63. You might need to adjust the padding-top value of the :after element to achieve the correct ratio.

UPDATE 2

Based on your request, I have made adjustments to the padding. Here is the updated Fiddle link. I removed the padding from the .thumb class and added it to the .img-wrapper class instead.

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

The positioning of the <a> tag seems to be slightly skewed

My goal was to add a simple dotted underline animation to the menu bar on my website, so I crafted the following HTML: <nav role="navigation" class="navigation"> <ul class="nav-listed-links"> <li class="active"><a href="">Ho ...

javascriptjqueryhtmlcss

Pattern of constructing PDO instances for connecting with a database

During my exploration of PHP with OOP, I stumbled upon discussions on Stackoverflow regarding the use of PDOs and avoiding globals and singletons. One particular question that caught my attention was titled How to properly set up a PDO connection, which p ...

phphtmlmysqlooppdo

Choosing limits or beginning & ending positions of a string in angular js

I'm facing an issue with extracting a substring from a string on my webpage that was developed using MEAN. I am currently selecting the substring by dragging the mouse (ng-mouseup). However, I need to determine the start and end positions or length of ...

javascripthtmlangularjs

Submitting forms with Ajax without reloading the page can cause errors in Internet Explorer

Simply put: Upon clicking the login button in Firefox, Chrome, or Safari, the form is submitted correctly, running a validation via ajax and opening a new page. However, in Internet Explorer (version less than 9), the submission attempts to post to the c ...

javascripthtmlajaxformsxhtml

Adjusting the height of a GAS iframe in WordPress with iframe-resizer: A step-by-step guide

I would like to embed an iframe of my Google Application Script Web into my WordPress site without the scroll bar. Refer to the image below for context. https://i.stack.imgur.com/7L6Tw.png I encountered an error message while attempting to use the iframe ...

javascripthtmlgoogle-apps-scriptiframeiframe-resizer

When you hover over the image, a thin white line materializes along the bottom edge

Can anyone help me troubleshoot an issue I am facing with a white pixel line that appears at the bottom of every image within the "div class gallery" element? The white line seems to only show up when the mouse hovers over the images, especially since I ha ...

htmlcsshovercss-transitionstransform

How to style multiple tags using CSS

Is there a way to style specific tags in CSS? <style type="text/css"> [attribute*="test"] { background-color: red; } </style> However, this method does not seem to work for the following tags: <test-1> </test-1> <t ...

htmlcsscss-selectors

What is the best way to show the initial 20 words on the screen, followed by the next 20 words using

Within a single tag, I have a string as shown in the example below. My goal is to display the first 20-25 words on screen, then continue with the next set of words, and so forth. Once 20 words are displayed, the remaining text should be hidden. <p>Lo ...

javascripthtml

What's the most effective method for incorporating lengthy HTML snippets into a single-page application?

As I develop a simple single page application, the focus remains on a few user views to manage local storage data without using any templating framework. Although it's primarily JavaScript/jQuery right now, the thought of incorporating Backbone or ano ...

javascriptjqueryhtmlsingle-page-application

Disabling the 'fixed navigation bar' feature for mobile devices

Here's a code snippet that I'm working with. It has the ability to make the navigation stick to the top of the page when scrolled to. HTML <script> $(document).ready(function() { var nav = $("#nav"); var position = nav.position(); ...

javascriptjqueryhtmlcss

The appearance of the page varies when viewed on different computers using the same version of Firefox

Previously, I posed a question with a touch of irony regarding Firefox without providing an example. As a result, my question was downvoted and I had to request its removal. Now, I have an example illustrating the issue at hand. It took some time to clean ...

htmlcssfirefoxwindows-7

Displaying a carousel of cards with a stacking effect using CSS and React

https://i.sstatic.net/254kG.jpgI am looking to design a layout similar to the image provided, where cards are stacked on top of each other with three dots for toggling. Can anyone guide me on how to achieve this visual effect? ...

javascriptcssreactjsbootstrap-4

Utilize JavaScript to target the specific CSS class

Hello, I am currently using inline JS in my Wordpress navigation menu, redirecting users to a login page when clicked. However, I have been advised to use a regular menu item with a specific class and then target that class with JS instead. Despite searchi ...

javascriptcsswordpress

Why does this CSS ticker only display the first four posts?

Hello, I'm interested in adding a News Ticker to my Rails application. I came across this CSS ticker: I'm facing an issue where it only displays the first four posts. I believe the problem might not be with my data retrieval using the .each loop ...

htmlcssticker

adjust the transparency level of the background color for a div element that is compatible with Internet Explorer

Looking for a way to adjust the opacity of a div's background? This is easily done in modern browsers such as Chrome and Firefox using rgba. However, I'm facing difficulties with IE7. The "filter: alpha(opacity=50);" property doesn't work f ...

htmlcss

What advantages does em have over px in the Zurb Foundation's responsive grid system?

The Zurb Foundation Media Queries are specified in em units: $small-range: (0em, 40em); /* 0, 640px */ $medium-range: (40.063em, 64em); /* 641px, 1024px */ $large-range: (64.063em, 90em); /* 1025px, 1440px */ $xlarge-range: (90.063em, 120em); /* 1441px, 1 ...

cssmedia-querieszurb-foundationbreakpoints

Is there a way to permanently position the carousel-caption in bootstrap4?

Looking for a solution to keep the carousel caption fixed when changing carousel images and to use a nav-tab in conjunction with the carousel. Is there a way to achieve this or a method to fix the nav-tab on the carousel? Thank you! ...

htmlcssbootstrap-4

Exploring ways to cycle through an array of objects during a jQuery ajax request

When making a jQuery ajax call to iterate over an API response, I am encountering the issue of receiving undefined data for all elements. Can someone guide me on how to properly iterate through an array of objects in jQuery? I am new to handling iteration ...

javascripthtmljqueryajaxbootstrap-4

What could be causing media queries to not update values even after being changed through JavaScript?

I have a simple navigation bar on my website, featuring links to different subpages. To enhance the user experience on mobile devices, I added a hamburger menu icon that is displayed on smaller screens. The links in the navigation bar are hidden using CSS ...

javascripthtmlcssmedia-queries

Achieving Consistent Vertical Alignment in Bootstrap 3 Among Various Rows and Columns

Just getting started with Bootstrap and facing a challenge related to vertical alignment using the grid system. Looking for some expert guidance and assistance in finding a solution. To help explain the issue better, I have captured 4 screenshots (links p ...

htmlcsstwitter-bootstrap