SASS make width equal height

[Sythen]

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.

[Paulie_D]

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.

[Sythen]

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.

[Paulie_D]

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.

[Sythen]

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

[dyr]

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:
http://codepen.io/shawkdsn/pen/grcwJ

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

[farskid]

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

[Author]

Posts