Responsive Image Masking...?

Our new site is supposed to be responsive, however the designer has mocked up some of the images so they seem to be masked.

So for example if the image is 100x100 in the design it's centered at about 30px wide.

Is that even possible? I've tried masking on a parent container in fiddler with maybe overflow:hidden but it never seems to work

So, can it be done

Thanks,
Steve

 

I'm not sure what an image mask has to do with responsive layout in the first place... Methinks you are using the wrong terminology; could you explain better, maybe include an example? (since an image mask is a channel reduced version used to erase pixels before drawing the final image over another...)

Of course if the *spit* "designer" is sitting around drawing goofy pictures of a "website" (and I hesitate to call what most Photoshop jockeys vomit up a website) before you have content of value marked up semantically, dimes to dollars they don't know enough about accessibility OR responsive layout to be opening their yap on the subject... since screwing around in Photoshop should be the end of the process, not the start... no matter how much the art chik-fil-a's have been pissing on accessibility and taken over the industry with their flashy "gee ain't it neat" designs, that are typically broken, slow or just plain useless to end users.

Without seeing the content image in question (I assume you mean a content image -- if it's presentation then it makes even LESS sense) and what you're trying to do with it, we're pretty much operating blindfolded here... especially with the incorrect terminology.

 

Thanks for the reply, I sense your disdain for designers is deep

You should see some of the turds one guy I work with comes up with....print designer who thinks he can do web.

Anywho, no a "mask" is kind of what I mean...like a wrapper div around the image with overflow:hidden (I assume) to mask off parts.



So given the above image, the black is the image coming from the CMS which is responsive (max-width: 100%;height: auto

However the design calls for "slices" (the red) of these images...and with 7000 total pictures I don't want to tell the client "Hey, designer wants you to manually cut up smaller versions of every image"

Steve

 

Not sure why you'd be 'slicing' it up into little bits... Sounds like 'but I can do it in photoshop' garbage that doesn't belong on a website in the first place - exactly what I expect from "designers". Auto-cropping images and splitting them into pieces is just how to slow down the page. Really that's what you are asking for -- cropping the image.

Overflow:hidden could do it, but wasting time transmitting image information that isn't used is just making the site drive along with the parking brake on.

Is the crop ALWAYS a center chunk? Is there some reason you're not building a proper thumbnail? With 7000 images are you sure you should even be building a website that isn't thumbnail driven?

Are these images actually content? (with 7K of them I'm assuming we're talking prawns) -- Could you get away with using background-image instead of the IMG tag?

IF it's always a centered slice, and it should be a IMG tag for being content, I'd see about using the GD module built into PHP to automatically generate the cropped images for you... problem with auto-cropping is they often look bad and/or don't leave the actual subject of the image in place though.

 

Essentially yes..."fake" cropping...hiding a chunk behind it's wrapper...Normally I'd just say no outright, but we're talking like 160px (by whatever height) image thumb (cms generated, I have no control over this thumbnail size). Where the visible portion of the image might be 100px->120px, so we're not wasting too too many bytes, page still ranks an A in yslow.

I've been trying a ton of things, but I can't seem to get it to work right, so I was wondering if it's even possible.
http://jsfiddle.net/stevescotthome/49gbK/14/

Background image would have been my first choice, but the lack of cross-browser scaling kept me away. The CMS also limits me in thumbnail caching...I can generate and crop on the server, but that would happen on every users webrequest unless I implement some unnecessarily complex caching to get over the cms limitation....but I guess from what you're saying...that's my only option

Dammit, alright thanks

Steve

 

I think the problem you might be having is trying to set the width of mask-outer, for a layout issue you're probably unaware of.

Percentages.

If you set a percentage width on a element who's parent is set to width:auto, it's ignored. As such that 50% width on .mask-outer does absolutely nothing.

The 'holly hack' to trip haslayout for IE uses this to it's advantage -- height:1% on a element who's parent has no height set on it (auto) will be treated as height:auto, meaning in compliant browsers that 1% is ignored, but it trips haslayout in IE.

In this case that behavior is working against you.

Also, you don't need to apo that child IMG tag -- instead of position:absolute; left:50% (which btw would show just the left half) you could set a margin, assuming you know the image's width.

Are the 'masters' of these images all the same width? that would simplify things greatly.

As to CMS side -- there's a trick I've used in the past that might work for you. In your images directory you set up a custom 404 handler. If the requested image doesn't exist, run some php to generate it from the master.

So if you had this master image:
images/220px-Liliumbulbiferumflowertop.jpg

You could attempt to call:
images/220px-Liliumbulbiferumflowertop.cropped.jpg

If it 404's hand off to php, strip out the .cropped from the filename, use that to load the master, crop the master, send to user as php generated and create the missing file. Next time someone tries to access, it will exist. You could then even add some math to make sure it uses a 'fill' algorithm if need be.