Gallery Help

[minterdewitt]

I really need some help on this, because I can not for the life of me figure out coding-wise how to do this. Here is the website in question. Here, here, and here are the three image variations I have to deal with: portrait, landscape, and square. Now, I want:

img {
    max-height: 1200px;
    min-height: 900px;
    max-width: 1200px;
    min-width: 900px;
}

Simple, right? Well, there’s numerous divs wrapping those images. And I can not figure out how to make the image appear properly while having the divs that are wrapping the images conform to the physical image dimensions. I mean, I can permanently set the width to 1200 pixels and have stretched images when it’s a portrait or I can set it to 900 pixels and have squashed images when it’s a landscape. Is there any way to do this properly?

Also, as a final note, this is the CSS currently controlling everything concerning the images:

#content-container .post-box {
    height: 100%;
    width: 100%;
    background: blue;
}

.post-box {
    overflow-x: hidden;
    overflow-y: hidden;
}

.blog_slider {
    height: 100%;
    width: auto;
    white-space: nowrap;
    background: green;
}

.blog_slider img {
    display: inline;
    width: auto;
    height: 100%;
}

Thank you in advance for anything you can help me with!

[Alen]

.blog_slider img {
    max-width: 100%;
    height: auto;
}

Should do it. Let the image ratio do it’s thing, you just worry about the width. Unless I’m misunderstanding something about what you’re after.

[shaneisme]

Having all four min / maxes can be dangerous. When you have an image that’s smaller than the mins or larger than the maxes, it will just stretch into a square and cause distortions.

Now, I’m going on what I hope is an understanding of what you want. You want all the images to be their appropriate aspect ratios while still stacking up perfectly. If I’m wrong on that, just ignore the rest of this post and let me know!

If you’re trying to set them all up in a grid so they’re nice and snug, different sizes and without whitespace – I’m afraid I have to tell you that’s not as easy as it should be.

You’re always going to have whitespace artifacts when floating things that are different sizes – especially when you want them all the be touching, but there are some plugins you could try.

Does this look like what you want? http://isotope.metafizzy.co/layout-modes.html

If so, give isotope a try, it might be just the ticket.

[minterdewitt]

@Alen, that’s partially what I’m looking for. Doing what you suggested allows for all images to span 1,200 pixels, but for portrait-style images, I would like for it to only span 900 pixels. Each image has a 4:3 ratio and if a portrait spans the full width of the page, it overstretches the image. The three types of images are 900×1,200 pixels, 1,200×900 pixels, and 1,200×1,200 pixels. Is there any way to have the portrait-style images only span 900 pixels instead of the full width?

@shaneisme, I actually believe the theme I’m using is already employing some form of Isotope in the gallery and Masonry in the blog. But no, that’s not quite what I’m trying to do. What I need is to make the images appear properly once you’ve already gone into the portfolio to view the separate images. ;)

[Author]

Posts