What we need is multiple images of different sizes and JavaScript to determine which images loads depending on the screen size of the user. If you were to view an image heavy website on your phone or small tablet, the performance of the site suffers because the high resolution images load. For many sites, though, images are a plenty. We only have one image and it’s not incredibly large.
#FLUID IMAGE BOX FULL SIZE#
While our image will now scale properly, it doesn’t take into account the fact that the full size image is loading regardless of need. I would say that this completes our fluid design, but that wouldn’t be completely true. And it seems to scale fairly without breaking the layout and what have you. To get around this, we can add an IE-only rule and just give it a width of 100%. As you probably know, IE6 doesn’t support the max-width property (among other things, but I suppose this isn’t the time to vent). Unless… wait for it… your users are using Internet Explorer 6. Browsers even do us the lovely favor of re-sizing images proportionally. With this added, let’s take a look at our site now: One quick fix that has been brought to light thanks to Richard Rutter is to simply give the image a max-width of 100% in the stylesheet. But how do we fix this? Images are typically a set width and height. However, try and throw an image tag in there, and you will surely notice that the responsiveness of this site comes to a screeching halt: Sure, our site responds to the size of browser windows and scales to be more suitable for mobile devices. However, there is one key component missing in our site: fluid images. Seemingly, our responsive site is complete.
So far, we’ve covered the basics of what responsive web design is: the fluid grid and CSS3 media queries. This is the fourth and final part of the series of posts I’ve been writing over the past few months about responsive web design techniques.
0 kommentar(er)
