Width:100% on responsive Images?

[patocallaghan]

Hey,

I couldn't find anything in the issues about this so sorry if this is covering old ground.

When building responsive sites you want your fluid images to take up 100% of their container, even if it's larger than the original image size. Currently in Inuit this works fine if images are downscaled but not when they are upscaled.

Do you think there's a place for a .img--full class similar to how .btn--full works?

.img--full {
  width:100%;
}

Thanks,
Pat

[nicoespeon]

Hi @patocallaghan!

Well, I disagree that responsiveness has you force your fluid images to take up 100% of their container if it's larger than the original image size because you cannot invent pixels and so, in my opinion, it won't look really nice.

I'd better say that the responsive image should take all the space it can and downscale responsively. But when it has reached its maximum size, it shouldn't go further or it may look pixelated.

If you wish/need to do so, then yes go ahead with that =)

However, I'm not sure that should be part of the inuit.css' core framework (which is all @csswizardry's choice). But it could be part of your ui/ styling. What do you think?

Regards!

[patocallaghan]

Hey @nicoespeon,

yep, all good, I have just added it to my own styles.

I understand what you are saying, the pixelation of upscaled images is not ideal. Although in my experience I've found when you are serving different size images to different viewports (not just serving the largest images and downscaling all the time), images will need to scale up and down. IMHO I'm okay with a bit of pixelation rather than gaps in my grid as it makes things look off.

Thanks,
Pat

[nicoespeon]

I get what you say =)

If you're ok with a bit of pixellation and that upscaling the image is the best compromise for you, I guess you're right.
Still, I'm not convinced that should be part of the core framework instead of your ui/ as this is not really a "good practice" if you don't have strong reasons for that.

I'm curious about @csswizardry's opinion on this point however.

[csswizardry]

Please see #291.

Thank you.