Mobile images

Discussion in 'HTML & Website Design' started by directoryman, Sep 12, 2016.

0
  1. #1
    Anybody know the best (easiest) html style sheet write up to use, to make an image shrink when in a mobile brower?
     
    Solved! View solution.
    directoryman, Sep 12, 2016 IP
  2. #2
    this works

    
img.scale-with-grid{
    max-width: 100%;
    height: auto;
}
    Code (markup):
     
    sarahk, Sep 12, 2016 IP
  3. JeffMichaels

    JeffMichaels Well-Known Member

    Messages:
    207
    Likes Received:
    10
    Best Answers:
    0
    Trophy Points:
    125
    #3
    You can use a CSS media query to apply CSS for devices with certain screen sizes. This should work well for your needs:

    
@media only screen   and (min-device-width: 320px)   and (max-device-width: 667px)   and (-webkit-min-device-pixel-ratio: 2) {

// YOUR CSS HERE

}
    Code (markup):
    More device specific media queries here: https://css-tricks.com/snippets/css/media-queries-for-standard-devices/
     
    JeffMichaels, Sep 12, 2016 IP