Skip to content

HTTPS clone URL

Subversion checkout URL

You can clone with HTTPS or Subversion.

Download ZIP

Loading…

Update inuit.css/base/_images.scss #111

Closed
wants to merge 1 commit into from

6 participants

@Anderson-Juhasc

What about it? I think it's interesting to have this class available.

@silvenon

That's a pretty good idea. The images module was discussed in #94, just to throw that reference in here.

@csswizardry
Owner

I’m thinking of a solution that will work with selectors like:

img[width],
img[height]{
}

This way you don’t have to remember to use a class; inuit.css will just know not to ‘fluidise’ anything that you have explicitly sized with width or height attributes.

@Anderson-Juhasc

Apparently a great solution.

@csswizardry csswizardry reopened this
@csswizardry csswizardry reopened this
@TheDutchCoder

How about:

img:not([width]) {
    width: 100%;
}

This way it only makes images fluid that don't have explicit horizontal dimensions.

@tlgreg

The drawback is, :not() isn't supported in IE8.

@TheDutchCoder

That's true, then you might need to overwrite it like so:

img {
    width: 100%;
}

img[width] {
    width: auto;
}
@teddyzetterlund

@TheDutchCoder Just want to make sure you mean max-width and not width?

@tlgreg

It should be max-width like in the fiddle above.

@TheDutchCoder

It depends, using max-width will not scale images down if needed. I thought this was about having images adapt to fluid layouts, so then width would be more appropriate, no?

@csswizardry
Owner

My solution works in IE8 as far as I can see, I don’t want to use less supported and more convoluted selectors where I don’t need to :)

@tlgreg

@TheDutchCoder Both scales it down, but width also scales it up if the image is smaller then the container. max-width : 100% keeps the width of the image except if it's bigger then the containing element.

@csswizardry I think it's elegant enough, maybe img[height] not necessary? :)

@TheDutchCoder

Okay I probably misunderstood the request then. Harry's solution only downscales for images without explicit widths/heights. I thought you wanted fluid images regardless ;-)

@silvenon

@TheDutchCoder Having images shrink when in a smaller container is called "fluid images". I don't believe anyone wants images to stretch outside their original dimensions :)

@csswizardry If there's no way to not tamper with dimensions of images with size attributes in the first place, I don't think there's any point in adding anything to inuit.css. We can turn off the fluidness ourselves when we want. I wanted to avoid the effect of images pushing the content around it when it's loaded and probably the only reasonable way to achieve that is using :not(), which is obviously out of the question.

In case I wasn't clear enough (these stuff is kinda hard to explain with words), I'll try to explain it with a pen and some code:

<img src="http://placekitten.com/100/100">

This will cause loading no. 1 (from the pen), because no size attributes have been set.


<img src="http://placekitten.com/100/100" width="100" height="100">

This will cause loading no. 2, because size attributes have been set.


<img src="http://placekitten.com/100/100">
img { width: 100px; height: 100px; }

This will also cause loading no. 2 because size attributes have been set, only in this case with CSS.


<img src="http://placekitten.com/100/100" width="100" height="100">
img { height: auto; } // or width or both

Even though the HTML attributes have been set, CSS makes the image ignore its height attribute forever and you can never ever cancel it :P (Same goes for width.)


So the only way to achieve loading no. 2 using inuit.css images module is to set the dimensions through CSS. But because in many situations you don't know those dimensions and really want the original image dimensions, you'd have to exclude the images module and manage image fluidity by yourself, applying it only on images you want fluid.

I realize this was overly verbose, but now I can be sure everyone's got it :P

@silvenon silvenon referenced this pull request from a commit in silvenon/inuit.css
@csswizardry Don’t apply fluidity to fixed-width images. Fixes #111 3d94e27
@silvenon silvenon referenced this pull request from a commit in silvenon/inuit.css
@csswizardry [refs #111] Remove redundant code 4762aa9
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Commits on Jan 16, 2013
  1. @Anderson-Juhasc
This page is out of date. Refresh to see the latest.
Showing with 8 additions and 2 deletions.
  1. +8 −2 inuit.css/base/_images.scss
View
10 inuit.css/base/_images.scss
@@ -4,8 +4,14 @@
/**
* Demo: jsfiddle.net/inuitcss/yMtur
*/
-img{
- @if $flexible-media == true{
+
+@if $flexible-media == true{
+ img{
+ max-width:100%;
+ height:auto;
+ }
+} @else {
+ .img--responsive {
max-width:100%;
height:auto;
}
Something went wrong with that request. Please try again.