What do you mean, make images width:100% like this;
img {width:100%} ?
With regards to the image in a div I assume you mean this;
<div><img></img></div>
div {width:76%} ?
In other words the image will scale without multiple resolutions of the
same image ?
Christopher
Hi Christopher
With firefox, you can set different screen sizes in their responsive
layout mode. VERY helpful.
One thing I have found to be a good method with images is to make them
width: 100%
and then wrap them in a div and set the images size with the div.
Also, set the images div's size in percentages based on that div's parent
and you will then have a fluid/liquid image in a container that you
can have size up or down respectfully.
If when resizing the viewport your image gets too big or too small,
then set a MQ with a min-width or max-width;
Karl DeSaulniers <mailto:k...@designdrumm.com>
Sunday, November 23, 2014 8:26 PM
Hi Christopher
With firefox, you can set different screen sizes in their responsive
layout mode. VERY helpful.
One thing I have found to be a good method with images is to make them
width: 100%
and then wrap them in a div and set the images size with the div.
Also, set the images div's size in percentages based on that div's parent
and you will then have a fluid/liquid image in a container that you
can have size up or down respectfully.
If when resizing the viewport your image gets too big or too small,
then set a MQ with a min-width or max-width;
IMO... NEVER set a max-width on an <img> itself.
2¢
Here is somthing I got when I went looking on Google for this same info.
CSS-Tricks:
/*CSS @media skeleton by Tirumal - April 28, 2013 -
http://code-tricks.com/css-media-queries-for-common-devices/*/
@charset "UTF-8";
/*Most Popular Screen Resolutions
Desktops & Laptops
1024×768 and higher
iPhone
5: 1136×640
4S: 640×960
3GS: 320×480
iPad
First & second generations: 1024×768
Third generation: 2048×1536
iPad Mini
1024×768
Android Phones & Tablets
Most phones are 320px wide or 360px wide, and most tablets are 800px
wide.
When designing for them, however, it is typical for developers to
break them
into the following groups based on their Density-independent pixel (dp),
which is the minimum screen size.
Small screens: 426dp x 320dp
Normal screens: 470dp x 320dp
Large screens: 640dp x 480dp
Extra-large screens: 960dp x 720dp*/
/* All Smartphones in portrait and landscape ----------- */
@media only screen
and (min-device-width : 320px)
and (max-device-width : 480px) {
/* YOUR STYLE GOES HERE */
}
/* All Smartphones in landscape ----------- */
@media only screen
and (min-width : 321px) {
/* YOUR STYLE GOES HERE */
}
/* All Smartphones in portrait ----------- */
@media only screen
and (max-width : 479px) {
/* YOUR STYLE GOES HERE */
}
/***** ANDROID DEVICES *****/
/* Android 240 X 320 ----------- */
@media only screen
and (max-width: 241px){
/* YOUR STYLE GOES HERE */
}
/* Android(Samsung Galaxy) in portrait 380 X 685 ----------- */
@media only screen
and (min-width: 375px)
and (max-width: 385px){
/* YOUR STYLE GOES HERE */
}
/* Android(Samsung Galaxy) in Landscape 685 X 380 ----------- */
@media only screen
and (min-width: 680px)
and (max-width: 690px){
/* YOUR STYLE GOES HERE */
}
/* Kindle Portrait 600 X 1024 ----------- */
@media only screen
and (min-width: 595px)
and (max-width: 610px){
/* YOUR STYLE GOES HERE */
}
/* Kindle Landscape 1024 X 600 ----------- */
@media only screen
and (min-width: 1000px)
and (max-width: 1030px){
/* YOUR STYLE GOES HERE */
}
/***** ALL GENERATION IPADS *****/
/* iPads in portrait and landscape----------- */
@media only screen
and (min-device-width : 768px)
and (max-device-width : 1024px) {
/* YOUR STYLE GOES HERE */
}
/* iPad in landscape----------- */
@media only screen
and (min-device-width : 768px)
and (max-device-width : 1024px)
and (orientation : landscape) {
/* YOUR STYLE GOES HERE */
}
/* iPad in portrait----------- */
@media only screen
and (min-device-width : 768px)
and (max-device-width : 1024px)
and (orientation : portrait){
/* YOUR STYLE GOES HERE */
}
/***** Retina IPAD 3 & 4*****/
/* Retina iPad 3 & 4 in portrait and landscape----------- */
@media only screen
and (min-device-width : 768px)
and (max-device-width : 1024px)
and (-webkit-min-device-pixel-ratio: 2){
/* YOUR STYLE GOES HERE */
}
/* Retina iPad 3 & 4 in landscape----------- */
@media only screen
and (min-device-width : 768px)
and (max-device-width : 1024px)
and (orientation : landscape)
and (-webkit-min-device-pixel-ratio: 2){
/* YOUR STYLE GOES HERE */
}
/* Retina iPad 3 & 4 in landscape----------- */
@media only screen
and (min-device-width : 768px)
and (max-device-width : 1024px)
and (orientation : portrait)
and (-webkit-min-device-pixel-ratio: 2){
/* YOUR STYLE GOES HERE */
}
/***** IPAD 1 & 2 (ALSO IPAD MINI)*****/
/* iPad 1 & 2 in portrait and landscape ----------- */
@media only screen
and (min-device-width : 768px)
and (max-device-width : 1024px)
and (-webkit-min-device-pixel-ratio: 1){
/* YOUR STYLE GOES HERE */
}
/* iPad 1 & 2 in landscape ----------- */
@media only screen
and (min-device-width : 768px)
and (max-device-width : 1024px)
and (orientation : landscape)
and (-webkit-min-device-pixel-ratio: 1) {
/* YOUR STYLE GOES HERE */
}
/* iPad 1 & 2 in portrait ----------- */
@media only screen
and (min-device-width : 768px)
and (max-device-width : 1024px)
and (orientation : portrait)
and (-webkit-min-device-pixel-ratio: 1){
/* YOUR STYLE GOES HERE */
}
/* Desktops and laptops ----------- */
@media only screen
and (min-width : 1224px) {
/* YOUR STYLE GOES HERE */
}
/* Large screens ----------- */
@media only screen
and (min-width : 1824px) {
/* YOUR STYLE GOES HERE */
}
/* Only iPhone 4 ----------- */
@media
only screen and (-webkit-min-device-pixel-ratio : 1.5),
only screen and (min-device-pixel-ratio : 1.5) {
/* YOUR STYLE GOES HERE */
}
Best,
Karl DeSaulniers
Design Drumm
http://designdrumm.com
______________________________________________________________________
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/
______________________________________________________________________
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/
