Skip to main content

Forums

This topic contains 6 replies, has 4 voices, and was last updated by  farskid 3 years, 7 months ago.

Viewing 7 posts - 1 through 7 (of 7 total)
  • Author
    Posts
  • #170282

    Sythen
    Participant

    Hey there guys,

    Long time CSS-Tricks viewer, first time poster. Hi :D
    I’m working on creating a grid layout of images, the problem I’m having is that the plugin (RTMedia) has a problem with cropping image sizes, and breaks the layout of my grid. Essentially I’m looking for a way to make the height of the div equal to the width and was wondering if there is a way I can essentially achieve:

    height: width;

    using Sass. Or alternatively, always make sure the DIV is a perfect square?

    Cheers!

    Sythen.

    #170283

    Paulie_D
    Moderator

    Yes, there is but it involved a setting fixed value (whether in px/em/%/vw) or whatever but, I suspect this may not solve your issue.

    #170294

    Sythen
    Participant

    hmm, unfortunately I don’t think it will – but perhaps I could just pass another variable into the mixin with the fixed value height.

    It does fix my issue, I was just wondering if there was a method to define it without having to give an explicit value.

    #170295

    Paulie_D
    Moderator

    CSS can’t detect a height so it can’t adjust something to something it doesn’t know.

    Unfortunately, I suspect JS/JQ will be the answer however, if you could provide a reduced case in Codepen.io it’s possible that another solution will come to light.

    #170297

    Sythen
    Participant

    The mixin is actually pretty much the same as what is found here: https://www.youtube.com/watch?v=LRrHk4rZtWw

    However it only takes into account images that have the same height.
    When images don’t have the same height, it throws it off.

    Perhaps I think the best thing to do is figure out why the plugin is cropping incorrectly.

    Edit:

    I think you’re right, Javascript might be the best way to go, the user can define how many images are shown on a given row and makes for a better user experience – thank you Paulie :)

    #170316

    dyr
    Participant

    If you’re willing to add some extra markup you can take advantage of the fact that padding when defined as a % relates to the element’s width (yes even top and bottom padding).

    This technique was invented ages ago by I don’t know who.

    Here’s a simple example:

    If you change the width of .box the height will always match. Downsides to this approach are that it requires an extra wrapping element and the size of the container isn’t based on the content within so it must be explicitly defined (not usually an issue in grid-based layouts).

    It’s a neat approach too. You can use this method to create fixed ratios of height/width with any proportion simply by changing the top-padding value of .box.

    http://www.mademyday.de/css-height-equals-width-with-pure-css.html

    #237367

    farskid
    Participant

    It was fantastic!!!
    The preserved ration trick actually made my day :-D;

Viewing 7 posts - 1 through 7 (of 7 total)

You must be logged in to reply to this topic.

icon-link icon-logo-star icon-search icon-star