Permalink
Browse files

Added a post about fluid images

  • Loading branch information...
1 parent 5a2c040 commit 1fd175a4d49f769cb018a84d464887a9c72332b3 @mottram committed Jul 6, 2010
View
33 _posts/2010-07-06-fluid-images-for-tumblr.markdown
@@ -0,0 +1,33 @@
+---
+title: Fluid Images
+layout: post
+category: basic
+short: fluid
+time: T13:12:19Z
+loc: CH48,UK
+locname: Wirral
+description:
+tags:
+ - css
+ - images
+ - tumblr
+---
+I rejigged the <abbr>CSS</abbr> for [One Thing Well](http://onethingwell.org) last night, making it semi-fluid, responsive to changes in browser window width and better suited to viewing on iPhones and iPads.
+
+I ran into one problem: how to resize wide images for smaller browser windows without affecting small images?
+
+Handily, when Tumblr resizes large images, it appends the width of an image to its filename--eg.,`tumblr_guagfduyfa_500.png`--so I could use CSS [attribute selectors](http://forabeautifulweb.com/blog/about/css_a_tribute_to_selectors "A piece on attribute selectors by Andy Clarke"):
+
+{% highlight pygments %}
+img[src$="_500"] {
+width:100%;
+max-width:500px;
+}
+
+img[src$="_400"] {
+width:100%;
+max-width:400px;
+}
+{% endhighlight %}
+
+Now, if the width of the containing `<article>` tag drops below 400px or 500px, the image will shrink to fit in [all modern browsers](http://kimblim.dk/css-tests/selectors/).
View
BIN wilmington/divider.gif
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
View
BIN wilmington/footer.gif
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
View
BIN wilmington/from-our-blog.gif
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
View
BIN wilmington/header.jpg
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
View
BIN wilmington/polaroid-top.jpg
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
View
BIN wilmington/wilmington.jpg
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.

0 comments on commit 1fd175a

Please sign in to comment.