May 15, 2014 at 8:51 am #170282
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:
using Sass. Or alternatively, always make sure the DIV is a perfect square?
Sythen.May 15, 2014 at 8:59 am #170283
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.May 15, 2014 at 9:24 am #170294
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.May 15, 2014 at 9:28 am #170295
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.May 15, 2014 at 9:32 am #170297
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.
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
.boxthe 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.January 27, 2016 at 5:33 am #237367
It was fantastic!!!
The preserved ration trick actually made my day :-D;
You must be logged in to reply to this topic.