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.

How Can I Make Image Responsive?

Discussion in 'HTML & Website Design' started by VanceVP, Aug 2, 2016.

0
  1. #1
    So I have been trying to learn better techniques and principles in coding websites. I have been reading up a storm and experimenting and I have a new page working the way I understand that it should be for a responsive page.

    Anyway, the only problem I am having (as far as I can tell) is that I cannot find a method that will resize a larger image down to something viewable on a mobile phone with CSS. If I use a smaller image that will work on my mobile, then it is way to small for desktop.

    I just do not know to correct this and nothing I have read over the past few days seems to be working. I have tried different things with the CSS. I do not know if it has to do with @media.

    HTML
    
 
<!DOCTYPE html><html lang="en"><head><meta charset="utf-8">
<meta
    name="viewport"
    content="width=device-width,height=device-height,initial-scale=1"
>
<link
    rel="stylesheet"
    href="screen2.css"
    media="screen,projection,tv"
>
<title>
    "Death Stalker" Fantasy Knife | CoolFantasyKnives.com
</title>

</head><body>

<h1>
    <a href="/">
        Cool Fantasy Knives
        <span><!-- image sandbag --></span>
    </a>
</h1>

<div class="heightWrapper">

    <div id="contentWrapper"><div id="content">
            <img src="/images/death_stalker_fantasy_knife.jpg">
                <div id="productInfo">
                    <h2>"Death Stalker" Fantasy Knife</h2>
                    <span class="retail-price">Item #: 002_mc2079</span><br><br>
                    <span class="retail-price">Retail Price: $78.49</span><br><br>
                    <span class="price">Your Price:<br>$59.73</span><br><br>               
           
            <form target="paypal" action="https://www.paypal.com/cgi-bin/webscr" method="post">
<input type="hidden" name="cmd" value="_s-xclick">
<input type="hidden" name="hosted_button_id" value="SGEAVGR55XKCC">
<input type="image" src="https://www.paypalobjects.com/en_US/i/btn/btn_cart_LG.gif" border="0" name="submit" alt="PayPal - The safer, easier way to pay online!">
<img alt="" border="0" src="https://www.paypalobjects.com/en_US/i/scr/pixel.gif" alt="pixel" width="1" height="1">
</form>
                </div>
       
        <p>
        The "Death Stalker" fantasy knife has a whopping 14.5" overall length. It features two full tang black stainless steel blades that 
        form the sides and claws. You will appreciate the metal tail with stainless steel stinger blade as well as the rubber coated handle 
        and metal forearm plate. A beautiful wood display stand is also included with this attention-grabbing fantasy knife.   
        </p>
    <!-- #content, .contentWrapper --></div></div>

    <div id="extras">
        <div class="testimonial">
            <h3>Testimonials</h3>
            How many times have you said to yourself, "Conan The Barbarian invited me to pillage with him, but I have absolutely NOTHING 
            to wear!" Well not any more! With the Scorpion Blade Arm Gauntlet, you will gain the admiration of your fellow death-stalkers, 
            even if you wear little else. Its many claws and pincers are eager to do your bidding, dispatching justice across the barren 
            wasteland, collecting the skulls of your enemies. I got mine, and right away took it to the priestess to be cursed with the blood 
            of eleven slave virgins, so that none may ever take it from me. It has since become the best extension to my already muscle-bound 
            arm I've ever had! And I wore The Gauntlet Of True Terror for 3 years!! In closing, woe-betide! anyone who comes ill prepared for 
            battle. But with this accessory, you'll make the other barbarians feel under-dressed! And the price won't sting your wallet.<br>
            <small>By: Joseph A.</small>
           
        <!-- .testimonial --></div>
    <!-- #extras --></div>

<!-- .heightWrapper --></div>
   
<div id="footer">
    <hr>
    &copy; 2016 &bull; CoolFantasyKnives &bull; All Rights Reserved
<!-- #footer --></div>

</body></html>
    Code (markup):
    CSS
    
 
/* null margins and padding to give good cross-browser baseline */
html,body,address,blockquote,div,
form,fieldset,caption,
h1,h2,h3,h4,h5,h6,
hr,ul,li,ol,ul,
table,tr,td,th,p,img {
    margin:0;
    padding:0;
}

img, fieldset {
    border:none;
}

hr {
    display:none;
    /*
        HR in my code are for semantic breaks in topic/section, NOT
        style/presenation, so hide them from screen.css users
    */
}

/* fix for legacy iOS and windows Mobile devices */
@media (max-width:512px) {
    * {
        -webkit-text-size-adjust:none;
        -ms-text-size-adjust:none;
    }
}

/* fix for HDX displays like the Kindle Fire HDX */
@media
    (-webkit-min-device-pixel-ratio:2) and (min-width:1600px), 
    (min-resolution:172dpi) and (min-width:1600px)
{
    html { font-size:200%; }
}

body {   
    min-width:55em; /* for pre CSS3 capable browsers */
    font:normal 85%/150% arial,helvetica,sans-serif;
    color:#FFF;
    background: linear-gradient(0deg, #FFF, #000 90%) no-repeat;
}

.heightWrapper {
    background: linear-gradient(0deg, #FFF, #000 90%) no-repeat;
}

h1 {    
    padding-left:2em;
    font-size:100%; /* prevent FF reverse inheritance bug */
    color: #FFF;
}

h1 a {
    position:relative; /* so we can absolute position span over this */
    display:block;
    padding:40px 0; 
    /* 40px top + 40px bottom + 64px line-height == image height */
    text-decoration:none;
    font:bold 60px/64px arial,helvetica,sans-serif;
    color:#22B6FA;
}

h1 span {
    position:absolute;
    top:0;
    left:0;
    width: 1275px;
    height: 141px;
    background:url(images/header.jpg) center left no-repeat;
    border-bottom: 1px solid #22B6FA;
}

h2 {
    padding-bottom:1.33em;
    font:bold 175%/145% arial,helvetica,sans-serif;
}

#contentWrapper {
    width:100%;
    float:left;
}

#content {
    padding:2em 0 1em 2em;
    margin-right:26em; /* postitive of #extras negative margin */
}

#extras {
    float:left;
    width:22em;
    padding:2em 2em 1em;
    margin-left:-26em; /* width plus padding */
    /*
        negative margin nulls width in flow, pops it up over
        #contentWrapper
    */
}

h3 {
    padding-bottom: 1em;
    text-align: center;
    font:bold 150%/130% arial,helvetica,sans-serif;
    color: #fff;
}

#product img {
    max-width: 100%;
    display: block;
    margin-bottom: 1em;
}

#productInfo {
    float: right;
    width: 17em;
    padding: 2em 4em 3em 3em;
}

.retail-price {
    color: #fff;
    margin-bottom: 1.5em;
}

.price {
    font-weight: bold;
    font-family: Arial, sans-serif;
    font-size: 2em;
    text-align: center;
    color: #000;
    padding-bottom: 1em;
}

p {
    max-width:56em; /* prevent long lines from being hard to follow */
    margin:0 auto;
    padding: 2em 2em 0 2em;
    font-size: 1.25em;
    color: #000;
}

.testimonial {
    text-align:left;
    max-width:100%;
    margin-bottom:10em;
    padding: 1em;
    font-size: 1em;
    line-height: 1.25em;
    color: #fff;
}

small {
    margin-left: 1.5em;
    font-size: 1em;
    color: #000;
}

#footer {
    padding: 3em;
    text-align:center;
    color: #000;
}

@media (max-width:50em) {
    body {
        min-width:192px; /* CSS3 possible, so let it go narrower */
    }
    #contentWrapper,
    #extras {
        float:none;
        width:auto;
    }
    #content,
    #extras {
        margin:0;
        padding:1em 0.5em 0;
    }
    h2 {
        font:bold 2.5em arial,helvetica,sans-serif;
        padding-bottom:0.66em;
        color: #22B6FA;
    }
    h3 {
        color: #000;
    }
    .testimonial {
        padding-top:1em;
        color: #000;
        border-top:2px solid #22B6FA;
    }
    #product img {
        display:inline-block;
        max-width:49%;
    }
}

@media (max-width:660px) {
    h1 {
        text-align:center;
        padding:0;
    }
    h1 a {
        padding:0.33em 0.167em;
        font:bold 300%/150% arial,helvetica,sans-serif;
    }
    h1 span {
        display:none;
    }
    #product img {
        display:block;
        max-width:100%;
    }
}

@media (max-width:340px) {
    #products {
        width:auto;
        margin:0 auto;
        -webkit-box-sizing:padding-box;
        box-sizing:padding-box;
    }
}
    Code (markup):

    Any suggestions?
     
    VanceVP, Aug 2, 2016 IP
  2. PoPSiCLe

    PoPSiCLe Illustrious Member

    Messages:
    4,623
    Likes Received:
    725
    Best Answers:
    152
    Trophy Points:
    470
    #2
    Well, depending on what this image is for (product image?) use percentages to define width, and set a max-width in px of the actual width of the image (so it doesn't get too big on high resolution)?
     
    PoPSiCLe, Aug 2, 2016 IP
  3. VanceVP

    VanceVP Member

    Messages:
    113
    Likes Received:
    7
    Best Answers:
    0
    Trophy Points:
    33
    #3
    Thanks PoPSiCle. I could have sworn that I tried that. Anyway, I changed the #product img code to look like:

    #product img {
    width: 100%;
    max-width: 600px;
    display: block;
    margin-bottom: 1em;
    }

    which I assume is what you are suggesting, but it does not work for some reason.

    In my original html, I just coded in the img src without any kind of styling. So because you suggested I modify the #product img, I wrapped the img src in the div #product img and that didn't seem to work either. And just FYI, the page this is for can be seen at http://coolfantasyknives.com/death_stalker_fantasy_knife.html

    Now what I did find that works is if I do the width and max-width styling in-line, it works fine and everything resizes fine.

    I removed the div #product img from the HTML and replaced it with <img style="width: 100%; max-width: 600px;" src="/images/death_stalker_fantasy_knife.jpg"> and this works perfectly and it looks the way I wanted on desktop and as small as I can resize my laptop screen.

    Now, if I change the product image to look like:

    #product img {
    width: 100%;
    max-width: 600px;
    }

    and if I wrap the img src in the #product img . . . it screws up where my #productInfo shows up on desktop, but it looks fine at the smallest screen I can get on my laptop.

    What am I doing wrong?

    The results make no sense to me and I really hope that I have explained all of this in a manner you can understand (it's been a really, really long day). I am trying to learn how to do this the right way, but it is frustrating.

    Thanks again for your input and I look forward to finding out what I am doing wrong.
     
    VanceVP, Aug 2, 2016 IP
  4. Ian08

    Ian08 Well-Known Member

    Messages:
    93
    Likes Received:
    4
    Best Answers:
    1
    Trophy Points:
    108
    #4
    Try simplifying the code as much as you could and putting it onto JSFiddle. It would then be a lot more easier for others to help you debugging.

    Generally speaking, when we want an image to resize automatically, we set its CSS to:
    width: auto; /* this line is needed only if the img tag has the width attribute */
max-width: 100%;
height: auto; /* this line is needed only if the img tag has the height attribute */
max-height: 100%;
    Code (CSS):
    Let us know at where and under what conditions your image is used so that we can provide a more accurate help.
     
    Last edited: Aug 3, 2016
    Ian08, Aug 3, 2016 IP
  5. VanceVP

    VanceVP Member

    Messages:
    113
    Likes Received:
    7
    Best Answers:
    0
    Trophy Points:
    33
    #5
    Ian08, thank you for your input and if you would take a look at http://coolfantasyknives.com/death_stalker_fantasy_knife.html (that I referenced in my previous post) you can see what and how the image is being used.

    Cheers . . .
     
    VanceVP, Aug 3, 2016 IP
  6. Ian08

    Ian08 Well-Known Member

    Messages:
    93
    Likes Received:
    4
    Best Answers:
    1
    Trophy Points:
    108
    #6
    I just checked your page, and the image resizes just fine as browser width decreases/increases. Is what you're trying to implement something else?
     
    Ian08, Aug 3, 2016 IP
  7. VanceVP

    VanceVP Member

    Messages:
    113
    Likes Received:
    7
    Best Answers:
    0
    Trophy Points:
    33
    #7
    Allow me to suggest that you re-read my previous post. In that post you will see that I got the image to resize by using in-line styling and that the suggestion offered by PoPSiCle did not seem to work. I explained what I tried and am asking why the only thing that worked was the in-line styling when the suggestion from PoPSiCle should have worked instead.

    Cheers . . .
     
    VanceVP, Aug 3, 2016 IP
  8. Ian08

    Ian08 Well-Known Member

    Messages:
    93
    Likes Received:
    4
    Best Answers:
    1
    Trophy Points:
    108
    #8
    I just tried wrapping the image with <div id="product"></div>, adding CSS code #product img { width: 100%; max-width: 600px; }, and removing the inline style of the image. And things work fine, too.
     
    Last edited: Aug 3, 2016
    Ian08, Aug 3, 2016 IP
  9. PoPSiCLe

    PoPSiCLe Illustrious Member

    Messages:
    4,623
    Likes Received:
    725
    Best Answers:
    152
    Trophy Points:
    470
    #9
    Okay - my suggestion wasn't to type the CSS like #product img - It was a generalisation, about it BEING a product image. If you don't want this behavior on all images, just give them a class and style that class accordingly. If you want all images to behave the same way, just do img {}
     
    PoPSiCLe, Aug 4, 2016 IP
  10. VanceVP

    VanceVP Member

    Messages:
    113
    Likes Received:
    7
    Best Answers:
    0
    Trophy Points:
    33
    #10
    Thanks for your help and input. I did finally get the problem worked out and now it works fine.

    Sorry PoPSiCle. I misunderstood (imagine that . . . lol). I do want this behavior for all the product images being displayed so I went with styling img {}.

    Again, gents, thanks so much for the help . . .
     
    VanceVP, Aug 5, 2016 IP
  11. WebDeveloperOne

    WebDeveloperOne Peon

    Messages:
    24
    Likes Received:
    2
    Best Answers:
    0
    Trophy Points:
    3
    #11
    Try to start using bootstrap, it will save you a lot of time and money. In bootstrap making a image responsive is as simple as this: <img class="img-responsive">
     
    WebDeveloperOne, Aug 11, 2016 IP
  12. VanceVP

    VanceVP Member

    Messages:
    113
    Likes Received:
    7
    Best Answers:
    0
    Trophy Points:
    33
    #12
    Thanks for your suggestion WebDev, but I will pass on bootstrap. I prefer to learn to code it myself no matter how long it takes. I want full control over my websites and I don't think you can get that with bootstrap. I prefer to keep my lines of code to a minimum and it looks like bootstrap bloats it much more than necessary while it tries to be all things to everybody.

    Thanks anyway . . .
     
    VanceVP, Aug 11, 2016 IP
    Puntocom81 and kk5st like this.