News:

Skill.jobs Forum is an open platform (a board of discussions) where all sorts of knowledge-based news, topics, articles on Career, Job Industry, employment and Entrepreneurship skills enhancement related issues for all groups of individual/people such as learners, students, jobseekers, employers, recruiters, self-employed professionals and for business-forum/professional-associations.  It intents of empowering people with SKILLS for creating opportunities, which ultimately pursue the motto of Skill.jobs 'Be Skilled, Get Hired'

Acceptable and Appropriate topics would be posted by the Moderator of Skill.jobs Forum.

Main Menu

Modern Web Engineerinng

Started by munem15-4873, September 26, 2018, 11:57:48 PM

Previous topic - Next topic

munem15-4873

Flexible Images

One major problem that needs to be solved with responsive Web design is
working with images. There are a number of techniques to resize images
proportionately, and many are easily done. The most popular option, noted
in Ethan Marcotte's article on fluid images but first experimented with by
Richard Rutter, is to use CSS's max-width for an easy fix.

1 img { max-width: 100%; }

As long as no other width-based image styles override this rule, every
image will load in its original size, unless the viewing area becomes
narrower than the image's original width. The maximum width of the
image is set to 100% of the screen or browser width, so when that 100%
becomes narrower, so does the image. Essentially, as Jason Grigsby noted,:
 
                    "The idea behind fluid images is that you deliver images at the maximum
size they will be used at. You don't declare the height and width in your
code, but instead let the browser resize the images as needed while using
CSS to guide their relative size." It's a great and simple technique to resize
images beautifully."

Note that max-width is not supported by older IE versions, but a good
use of width: 100% would solve the problem neatly in an IE-specific style
sheet. One more issue is that when an image is resized too small in some
older browsers in Windows, the rendering isn't as clear as it ought to be.
There is a JavaScript to fix this issue, though, found in Ethan Marcotte's
article.

While the above is a great quick fix and good start to responsive images,
image resolution and download times should be the primary
considerations. While resizing an image for mobile devices can be very
simple, if the original image size is meant for large devices, it could
significantly slow download times and take up space unnecessarily.

Source: Smashing eBook􁴹Modern Web Design and Development