Archive for the ‘CSS’ Category

Scale div / element and maintain aspect ratio with and without box-sizing and padding-top

Kind of ran across this by accident today. I have looked for solutions for this from time to time and always ended up using some sort of hack, but this works, no hacks.

I need this when I want a rectangle to keep it’s ratio without having an image nested inside, but instead using the image as the background.

Use case for this today was a responsive Flexslider implementation with a different set of images with different ratios shown with a media query for smaller devices.

This works with and without box-sizing but if you look at the element in your inspector, box-sizing makes more sense.

There may already be a solution or the same post somewhere else, if so, let me know.

.scales { 
box-sizing: border-box; 
max-width: 100%; 
padding-top: 25%; 
border: 1px solid red; 
<div class="scales"></div>

Squeeze your browser and check it out. I didn’t test in every browser.

L-Square Browser Extension / Add-On

Update: I guess I missed this, but something very similar to this made it into Chrome

The other day I read an article mentioning the Boston Globe embracing responsive design. The site was great, but I was having trouble determining screen widths and couldn’t find a tool to easily do this, so I made this for myself. It was easy enough to make so I thought I’d share it with you.

There may be something else that accomplishes the same thing, if there is, sorry, I didn’t see it.

Once the bmklt or extension is clicked, it toggles the rulers over the current page content. The z-index is like 600000 or something, so if someone has a super-high z-index, it may not work. Also, it seems to not work on some Google stuff, but this didn’t really matter too much to me.

It looks like this in use (links below):

Bookmarklet: L-Square
Just drag this up to your tool bar and voila. I did not test this on IE. Please let me know if it has issues and/or what the fix is.

Safari extension: L-Square
This has been approved by Apple and is available in the Extensions Gallery under Developer.

Firefox extension: L-Square
This link will take you to the Mozilla Add-Ons site.

Chrome extension: L-Square
This link will take you to the Chrome web store.

Note: You may need to reload your current page after you install the extension.

Disclaimer: This is my first attempt at extensions. Please forgive me if they suck.