Ever wondered how much money our industry wastes on css hacks?

[cmscss]

I’ve been trying to crop an image tag so it always fills it’s parent – a fairly basic concept from a design point of view, but kind of tricky when the image is a slider.

After 2 days I’m no closer but I’ve got to wondering how many millions of dollars in time our industry wastes each year on:
– Realising that a basic layout tool doesn’t exist in CSS
– Researching hacks
– Testing hacks to find one that works for a particular site
– Implementing the final hack
– Documenting the hack (either for ourselves or the world at large)

Maybe it’s billions each year?

I realise that the prevailing attitude is to remain positive as there’s nothing any of us can do (ever tried submitting a css use-case to the powers that be?). But I wonder if PHP or Ruby developers would tolerate a language whose daily use revolves around hacks?

I sometimes think we all must share a mental illness to put up with it!

Anyway, back to ye old hack research…

[shaneisme]

One of the things I love about front-end dev is how open the community is.

Why don’t you post up your attempt and we’ll see if there is some knowledge here that can help?

The longer you do it, the more it all makes sense… not to mention how much better it is today than it was in the 90’s!

[Alen]

What’s considered a hack in your opinion?

I ask because I don’t feel I’m ‘implementing‘ hacks in my day-to-day job.

And with server-side scripting it’s more about the architecture of your application. Language it self is not limiting.

I don’t believe CSS, nor the JS is limiting either.

There are so many solutions of there that figuring out how someone solved a particular problem is relatively easy. And it’s hard to imagine that someone hasn’t solved the problem you are trying to solve.

[cmscss]

Thanks guys,

My definition of a hack is using CSS tools not intended for the desired result which creates other issues, requiring yet more hacks – they’re so normal in CSS we call them techniques!

I’m the first to admit that I have a lot to learn as I’m just a designer. It seems strange that basic layout (from a designer’s point of view) requires front-end or back-end scripting? height: 100%; or align: top; (or even align: center;) are basic examples of things that don’t exist or work in a non-intuitive way from a layout point of view – it got me wondering at the wastage in our industry.

Anyway, thanks for the offer to look at the issue – much appreciated.

I have a JS fiddle here: http://jsfiddle.net/WLggG/4/

To see the issue, resize the result pane so the text is longer than the image.

I have an Owl Carousel in place of the image on my real web page but is there a way to get the slider images to scale, centre and crop to fill the left parent?

I’ve researched and tried various css techniques which include:

1.
Adding height: 100%; on all elements up the tree (and technique variations like min-height etc)

2.
Inserting an additional image into a background inline style so it can be controlled using background-size: cover; – then making the img tag transparent so it’s still there for SEO.

Any pointers in the right direction would be much appreciated.

Cheers

[cmscss]

Hmm, sorry guys, I’ve tried posting the example in 3 different browsers but it doesn’t save – is there a trick or requirements that I’m missing?

[cmscss]

This is so strange, I can only post this much of the reply, hopefully it posts. Anyway, thanks for the offer to look at the issue – much appreciated.

I have a JS fiddle here: http://jsfiddle.net/WLggG/4/

To see the issue, resize the result pane so the text is longer than the image.

I have an Owl Carousel in place of the image on my real web page but is there a way to get the slider images to scale, centre and crop to fill the left parent?

Any pointers in the right direction would be much appreciated.

[__]

This:

style='background-image: url('http://placehold.it/1200x1200');'

Should be:

style="background-image: url('http://placehold.it/1200x1200');"

other than that, seems to work fine.

[cmscss]

Awesome, thank you – dumb error! So how could I make that work with a slide show (just fading no sliding) instead of an image? This is the bit that I’ve been working on for several days.

[nixnerd]

You’ll need a container and some slides that are built to fill the container. You should post an exact replica of what you’re trying to do. Try putting the slider in there and see what happens. Then post what you’ve got and let us mess with it.

BTW, you should totally be using Codepen :)

[cmscss]

Thanks heaps for the replies, here’s an updated fiddle: http://jsfiddle.net/WLggG/22/

Basically, I think that If the .slide div could be forced to stretch to the height of the ultimate parent .hero then I’m pretty sure the inline background image will scale to fit using background-size: cover;. Hope that makes sense.

[shaneisme]

Could you get the same effect by making a container for each slide 100% x 100% and give them background images instead while using background-size: cover?

Just an idea :)

[cmscss]

I may be misunderstanding your suggestion sorry – is that not what I’ve done?

I spent a lot of time on height: 100%; but it doesn’t work like width: 100%;. I tried adding height: 100%; to all parent elements all the way up to html (as suggested on stack overflow) but it didn’t seem to work – with or without a slider. Is that what you mean by 100% x 100%?

Cheers

[cmscss]

After reading a lot of questions/answers around the place, it would seem that getting a child to fit the height of it’s parent is one of those simple things that CSS doesn’t seem to do out of the box.

I need to move on to other parts of the project but thought I’d check to see if anyone has a way of cropping the slides so they fill the ultimate parent .hero: http://jsfiddle.net/WLggG/22/

Cheers

[Author]

Posts