As I wrote in previous posts what solution is there if an image gets
stretched by roughly 56% before the next break-point ?
Tom Livingston wrote:
On Wednesday, September 2, 2015, Crest Christopher
<crestchristop...@gmail.com <mailto:crestchristop...@gmail.com>> wrote:
Can SaSS detect within a MQ if a image size is beyond a threshold
and feed the user a new image; let me explain more in-depth.
Suppose you have a small image and a medium image, 320 width the
small image is fine, 5xx px width the medium image is used,
straight forward. Your page gets viewed on a 602px (fictional
numbers) device, your medium sized image gets stretched the only
solution is to feed it a 602px width image, can this be done all
within a MQ using SaSS; I'm referencing this
<http://joshbroton.com/multiple-background-images-using-sass-and-media-queries/>
page ?
Is it possible to setup modernizer to detect if an image is
getting stretched based on percentage, suppose 15% beyond it's
regular size; so I can see what resolutions I need to recreate
graphics at based on my previous question ?
Christopher
What I do is to used images that work within a range of widths and
place my breakpoints where the content needs them. Don't have your
images be the exact dimensions. I usually use base images at around
600 wide. This covers a wide range of devices. Be sure to optimize
your images. At about 600 wide, I swap out my base image for one that
is around 800 wide which covers a wide range of tablet devices. At
around 750 wide I swap out that 800 image for a desktop sized one.
Width varies here based on your preferred max width.
Optimize your images.
HTH
--
Tom Livingston | Senior Front End Developer | Media Logic |
ph: 518.456.3015x231 | fx: 518.456.4279 | medialogic.com
<http://medialogic.com>
#663399
______________________________________________________________________
css-discuss [css-d@lists.css-discuss.org]
http://www.css-discuss.org/mailman/listinfo/css-d
List wiki/FAQ -- http://css-discuss.incutio.com/
List policies -- http://css-discuss.org/policies.html
Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
