tips for ensuring uniform height on responsive thumbnails

Can someone help me figure out why this code isn't working on my page?

var gallery = $('.photos').gallerify({ margin:10,
mode:{ maxHeight: screen.height * 0.5,
breakPoints:[
    
    
{ minWidth: 1170, columns: 4, },
{ minWidth: 970,  columns: 3, },
{ minWidth: 750,  columns: 2, },
{ maxWidth: 750,  columns: 1, }
    
    
]},lastRow:'adjust' });
.photos { margin:auto; font-size:0px; }

.photo { position: relative; }
<div class="photos">
  
<img class="photo" src="http://placehold.it/600x400">

<img class="photo" src="http://placehold.it/600x400">

<img class="photo" src="http://placehold.it/600x400">

<img class="photo" src="http://placehold.it/600x400">

<img class="photo" src="http://placehold.it/600x400">

<img class="photo" src="http://placehold.it/600x320">

...

</div>


<!-- Scripts -->

<script src="https://code.jquery.com/jquery-2.1.4.min.js"></script>

<script src="https://cdn.rawgit.com/xremix/xGallerify/master/dist/jquery.xgallerify.min.js"></script>

.fancyboxthumbnailsgallerybook0{ max-width: 500px; height:500px; float:left; width: 23%; margin:5px 5px 0px 5px; background-color:#1E1E1E; overflow:hidden;  }


@media (max-width: 1260px) { .fancyboxthumbnailsgallerybook0 { width: 30%; } }

@media (max-width: 1024px) { .fancyboxthumbnailsgallerybook0 { width: 47%; } }

@media (max-width: 500px)  { .fancyboxthumbnailsgallerybook0 { width: 98%; } }
<div class="right">


<img class="fancyboxthumbnailsgallerybook0" src="http://www.starkasia.com/wp-content/uploads/book4/01.jpg" alt="Book 4"/>

<img class="fancyboxthumbnailsgallerybook0" src="http://www.starkasia.com/wp-content/uploads/book4/02.jpg" alt="Book 4"/>

...

<img class="fancyboxthumbnailsgallerybook0" src="http://www.starkasia.com/wp-content/uploads/book4/01.jpg" alt="Book 4"/>


</div>

Any ideas for setting a ratio in my jsfiddle? I need help with the height issue.

Check out Demo jsfiddle (NSFW)!

jqueryhtmlcssimageresponsive-design

Answer №1

You have the ability to utilize images as background-images and adjust their background-size property to cover.

ul,li{
  margin: 0;
  padding: 0;
}
li{
  list-style: none;
}
.fancyboxthumbnailsgallerybook0{
  max-width: 500px; 
  height:500px; 
  float:left;
  width: 23%; 
  margin:5px 5px 0px 5px; 
  background-color:#1E1E1E; 
  overflow:hidden;
  background-size: cover;
  background-position: center center;
}
.fancyboxthumbnailsgallerybook0 img{
  visibility: hidden;
}
@media (max-width: 1260px) { .fancyboxthumbnailsgallerybook0 { width: 30%; } }

@media (max-width: 1024px) { .fancyboxthumbnailsgallerybook0 { width: 47%; } }

@media (max-width: 500px)  { .fancyboxthumbnailsgallerybook0 { width: 98%; } }
<ul class="right">
  
<li class="fancyboxthumbnailsgallerybook0" style="background-image: url('http://www.starkasia.com/wp-content/uploads/book4/01.jpg')">
    <img src="http://www.starkasia.com/wp-content/uploads/book4/01.jpg" alt="Book 4"/>
</li>

<li class="fancyboxthumbnailsgallerybook0" style="background-image: url('http://www.starkasia.com/wp-content/uploads/book4/02.jpg')">
  <img src="http://www.starkasia.com/wp-content/uploads/book4/02.jpg" alt="Book 4"/>
</li>

<li class="fancyboxthumbnailsgallerybook0" style="background-image: url('http://www.starkasia.com/wp-content/uploads/book4/03.jpg')">
  <img src="http://www.starkasia.com/wp-content/uploads/book4/03.jpg" alt="Book 4"/>
</li>


<li class="fancyboxthumbnailsgallerybook0" style="background-image: url('http://www.starkasia.com/wp-content/uploads/book4/04.jpg')">
  <img src="http://www.starkasia.com/wp-content/uploads/book4/04.jpg" alt="Book 4"/>
</li>

<li class="fancyboxthumbnailsgallerybook0" style="background-image: url('http://www.starkasia.com/wp-content/uploads/book4/02.jpg')">
  <img src="http://www.starkasia.com/wp-content/uploads/book4/02.jpg" alt="Book 4"/>
</li>

<li class="fancyboxthumbnailsgallerybook0" style="background-image: url('http://www.starkasia.com/wp-content/uploads/book4/04.jpg')">
  <img src="http://www.starkasia.com/wp-content/uploads/book4/04.jpg" alt="Book 4"/>
</li>

<li class="fancyboxthumbnailsgallerybook0" style="background-image: url('http://www.starkasia.com/wp-content/uploads/book4/01.jpg')">
  <img src="http://www.starkasia.com/wp-content/uploads/book4/01.jpg" alt="Book 4"/>
</li>


</ul>

We appreciate your cooperation.

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

CSS - owl carousel automatically stretches images to full width

Here is the code snippet that I am working with: $(document).ready(function() { $('.owl-carousel').owlCarousel({ loop:true, items:4, autoplay:true, autoplayTimeout:2000, autoplayHoverPause:true }); }); #owl-demo ...

javascripthtmlcss

Is it possible to stop fastclick from triggering the "active" state while scrolling?

Utilizing FastClick on a page with oversized links to eliminate the 300ms delay for taps in mobile browsers has been successful. The "highlight" style for the links' :active states is triggering quickly, thanks to FastClick. However, a challenge aris ...

javascriptcssmobile-safarifastclick.jsfastclick

3 Methods for Implementing a Floating Header, Main Content, and Sidebar with Responsive Design

I am following a mobile-first approach with 3 containers that need to be displayed in 3 different layouts as shown in the image below: https://i.sstatic.net/UjKNH.png The closest CSS implementation I have achieved so far is this: HTML: <header>.. ...

javascripthtmlcsscss-float

Take a snapshot of an element using fixed element positioning

When it comes to extracting a sub image from a webpage using Selenium, I have found a reliable method. First, I capture a screenshot of the entire page and then extract the desired sub-image using the element's coordinates. Dimension elementDimension ...

javajqueryhtmlcssselenium

Using Jsoup: Converting a String with HTML into an XHTML file

Looking for a way to achieve this using Jsoup without involving files? I've come across examples that use byte arrays and file outputs, but all I need is a valid XHTML document to work with itext PdfWriter and XMLWorker. Any suggestions? ...

javahtmlparsingxhtmljsoup

The `class="d-none d-lg-block"` is a handy feature in Bootstrap for hiding elements

I am having trouble implementing the class="d-none d-lg-block". It does not seem to be working as expected. Here is the code that I have been attempting to use: Could you please review it and let me know if there are any errors? <div class=& ...

htmlbootstrap-4gridviewstylesbootstrap-grid

Using Jquery to append a selector to an object that has already been selected

Hey there, When utilizing the standard selector, I've managed to choose the grandparent of an input text field (which is essentially a <td> element), and then used .next() function to pick the next row. var nextOne = $(this).parent().parent(). ...

jqueryjquery-selectors

Can I split icons instead of combining them when stacking in Font Awesome?

Is it possible to stack icons by dividing their size instead of multiplying them? I am looking to have my first icon be the same size as the font I am using, and the icon on top of it to be half the font size. Can this be achieved with Font Awesome or do I ...

cssfont-awesome

When using jQuery UI tabs with the heightStyle set to "content", the height may be incorrectly calculated if there is a table inside

Recently, I integrated JQuery UI tabs into my project and wanted to nest a table within one of the tabs. To ensure that the tab's height adjusts according to the table inside, I set the heightStyle property to "content." However, upon activating the ...

jquerytabs

The homepage on Delphi is having trouble displaying the menus

My issue is not related to resolving a problem with a specific IDE, such as Delphi, but rather about identifying the root cause of the issue. As many of you may be aware, in Delphi 2010 (and possibly in earlier versions), there is a welcome page that displ ...

javascripthtmldelphi

Guide to changing the background color of a table cell using jQuery

I have created an ASP.net webpage with an ASP GridView to showcase a data table. My goal is to implement JavaScript that will change the color of cells containing the value '0' to red. I believe I can achieve this using $("td").each or document. ...

asp.netjquerygridview

Dynamic Website Layout Bootstrap 4 [ card designs and Tabs ]

Currently, I am in the process of developing a web application that needs to be responsive across various devices including mobiles, tablets, and PCs. My focus right now is on creating a user profile page that adapts well to different screen sizes. To achi ...

htmlcssbootstrap-4

How to design 'Sliding gallery panels' using jQuery and CSS3?

Usually, I know how to start a project with tutorials or some experience, but this time I'm stuck on what to even call it. Simply defining the concept could help me search for the right resources. Here's a quick mockup I put together: I want to ...

jquerycsssliderhtml5-canvaspanel

Unusual Actions Observed During jQuery Animation

Currently, I am utilizing jQuery's animate() feature along with easing from the jQuery UI plugin to create smooth scrolling effects on my webpage through links located in a sidebar. Additionally, this functionality is also being used to power a "back ...

jqueryjquery-ui

The align-content property in CSS Flex does not function properly when used alongside an inline height declaration

I encountered an issue with the CSS Flex property align-content. It seems to not work properly in a container where the height is declared inline. However, once I move the inline height declaration to a separate CSS class, everything works fine. Both Chrom ...

htmlcssflexbox

Show additional links beneath the main homepage URL in search engine result pages

Seeking a way to optimize search engine results to display sub-links under the main homepage of a website. Attached is a screenshot illustrating the desired outcome when searching for a particular term. Appreciate any insights or solutions on achieving thi ...

javascripthtmlseo

Singling out a particular navigation tab

When attempting to link specific table IDs so that the corresponding tab is active when opened (i.e. www.gohome.com/html#profile), I am facing an issue where the active tab remains unchanged. Even after specifically calling out tab IDs, there seems to be n ...

javascriptphphtmlcss

Is there a way to stop the dropdown menu from disappearing when clicking on a popover that was activated from the dropdown?

Are you familiar with creating a popover that is triggered by a dropdown menu using the Twitter Bootstrap javascript components? Could you provide guidance on how to prevent the dropdown menu from closing when a user clicks on the popover? For reference, ...

javascriptjqueryajaxtwitter-bootstrap

Is it possible to use jQuery to add something to the end of

There are two URLs that I am working with: http://blah.com/blah/blah/blah and http://shop.blah.com/. My goal is to take the domain from the first URL (blah.com) and concatenate it with the path (/blah/blah/blah) from the second URL, resulting in http://sho ...

javascriptjquery

Align the elements of the contact form to the opposite sides

I am experiencing an issue with my contact form where all elements are flowing horizontally instead of vertically. I would like everything to be floated to the left and aligned vertically, except for the "message" box and submit button which should be on t ...

csscss-floatcontact-form