1. Advertising
    y u no do it?

    Advertising (learn more)

    Advertise virtually anything here, with CPM banner ads, CPM email ads and CPC contextual links. You can target relevant areas of the site and show ads based on geographical location of the user if you wish.

    Starts at just $1 per CPM or $0.10 per CPC.

Getting Image to Shrink for Mobile Screen

Discussion in 'CSS' started by chome4, Apr 5, 2022.

  1. #1
    Got this image:

    https://gmjones.org/test2/test.html

    When I view it on a smartphone, it doesn't behave responsively. It's from a template. I added:
    height:100vh; which seemed to work but back in desktop mode, the image was larger.

    Can someone shed some light on this?

    Thanks in advance.
     
    Last edited by a moderator: Apr 5, 2022
    chome4, Apr 5, 2022 IP
  2. deathshadow

    deathshadow Acclaimed Member

    Messages:
    9,732
    Likes Received:
    1,998
    Best Answers:
    253
    Trophy Points:
    515
    #2
    100vh as height forces it to the available height, so of course it's bigger on desktop. What you want is max-width AND max-height... and you might want to make sure width and height are set to auto.

    
    width:auto;
    height:auto;
    max-width:100%;
    max-height:100%;
    
    Code (markup):
    I also advise AGAINST setting 100vw or 100vh on anything, as it doesn't compensate for scroll bars, meaning it could induce unwanted scroll behaviors if you're not careful with it. Those are useful for sizing small things, but really IMHO if you use it for anything over "50" you're just asking for problems.

    Also side note, don't use media="all", you're wasting time sending screen layout to print, aural/speech, etc. IF this is screen layout, use media="screen". It's also 2022, you can stop saying type="text/css". There's also no reason to namespace opengraph since meta by definition are open to any name/content.

    I also don't know wtf "webslides" is, but that CSS is horrifyingly bloated rubbish. Hell this line ALONE:

    font-size: 62.5%;
    Code (markup):
    deserves a good swift kick in the groin.
     
    deathshadow, Apr 11, 2022 IP
    mmerlinn and JEET like this.
  3. shaznjam

    shaznjam Active Member

    Messages:
    4
    Likes Received:
    0
    Best Answers:
    0
    Trophy Points:
    86
    #3
    This css will help you to reduce image size in mobile

    .container {
    width: 50%;
    height: 200px;
    overflow: hidden;
    }

    .container img {
    max-width: 100%;
    height: auto;
    display: block;
    }
     
    shaznjam, May 7, 2022 IP