Page 1 of 2 12 LastLast
Results 1 to 10 of 15

Thread: CSS for resizable image?

  1. #1
    Join Date
    Jan 2009
    Location
    NH
    Posts
    356
    Thanks
    54
    Thanked 10 Times in 10 Posts

    Default CSS for resizable image?

    I am trying to make a site with HTML5 and responsive design. I have the test page here

    What do I have to do so the main banner image scales (down or up) to fit various screen sizes?

    here is the HTML

    HTML Code:
    <!DOCTYPE html>
    <html>
    <head>
    <title>IPCamHD.com Our Cameras are all HD. Demand it for your Security!</title>
    <link rel="stylesheet" type="text/css" href="styles-test.css">
    <link rel="stylesheet" href="CSS3Menu/css3menu/style.css" type="text/css" /><style>._css3m{display:none}</style>
    <Link rel="icon" type="image/ico" Href="images/favicon.ico">
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
    <meta name="description" content="Video Surveillance Products designed around our customers particular needs. Our expert Surveillance consultant has over 35 years experience in the business. Our Cameras are all HD. You demand it on your Television. Demand it for your Security!Video Surveillance In-A-Box is the result of exhaustive research and testing. My company has exclusive factory direct purchase power. No useless, costly middle-man or monthly fees!">
    <meta name="keywords" content="IP CAM 2012, security camera, surveillance, Tenvis, Compro, wireless camera, surveillance camera, security video, spy camera, home security camera, surveillance camera, VPN software, Stop Identity Theft, IP Cam 2012, security equipment, monitoring equipment, intelligent monitoring, DVR, hard disk recorders, network cameras, security, video monitoring, NVR, network hard disk video recorder, H 264 DVR System, HD Video Security System, HD Surveillance Camera, HD Security Cameras Systems, Home Video Surveillance Packages,  High Definition Surveillance System">
    <meta name="author" content="Matt Pilon Sr.">
    <meta name="viewport" content="width=device-width, initial-scale=1" />
    <script>   
    function toggle() {
    	var ele = document.getElementById("toggleText");
    	var text = document.getElementById("displayText");
    	if(ele.style.display == "block") {
        		ele.style.display = "none";
    		text.innerHTML = "show";
      	}
    	else {
    		ele.style.display = "block";
    		text.innerHTML = "hide";
    	}
    } 
    </script>
    
    <script src="js/modernizr-1.0.min.js"></script>
    <div id="mainPicture"><img src="images/main-logo.jpg" alt="IPCAMHD logo"></div>
        <!--[if lt IE 9]>  
        <script src="http://html5shiv.googlecode.com/svn/trunk/html5.js"></script>  
        <![endif]-->  
    </head>
    <!-- Start css3menu.com BODY section -->
    <ul id="css3menu1" class="topmenu">
    	<li class="topfirst"><a href="index.html" title="Home" style="height:18px;line-height:18px;">Home</a></li>
    	<li class="topmenu"><a href="#" title="Products" style="height:18px;line-height:18px;"><span>Products</span></a>
    	<ul>
    		<li><a href="tenvis.html" title="Tenvis">Tenvis IP Cams</a></li>
    		<li><a href="compro.html" title="ComPro">ComPro Technology Cams</a></li>
    		<li><a href="nvr.html" title="Network Video Recorder">Network Video Recorder</a></li>
    		<li><a href="accessories.html" title="VMS Software">VMS Software</a></li>
    		<li><a href="car-sec.html" title="Car Video Security">Car Video Security</a></li>
    	</ul></li>
    	<li class="topmenu"><a href="#" title="Catalogs" style="height:18px;line-height:18px;"><span>Catalogs</span></a>
    	<ul>
    		<li><a href="tenvis-cat.html" title="Tenvis Catalog">Tenvis Catalog</a></li>
    		<li><a href="compro-cat.html" title="Compro Catalog">Compro Catalog</a></li>
    	</ul></li>
    	<li class="topmenu"><a href="support.html" title="Support" style="height:18px;line-height:18px;">Support</a></li>
    	<li class="topmenu"><a href="policies.html" title="Policies" style="height:18px;line-height:18px;">Policies</a></li>
    	<li class="topmenu"><a href="about.html" title="About Us" style="height:18px;line-height:18px;">About Us</a></li>
    	<li class="toplast"><a href="contact.html" title="Contact" style="height:18px;line-height:18px;">Contact</a></li>
    </ul>
    <!-- End css3menu.com BODY section -->
    <div class="contentBox">
    <div class="innerBox">
    <div class="contentText">
    <h2>Our Cameras are all HD. You demand it on your Television. Demand it for your Security!</h2>
    <div id="3column">
    
      <div id="col1">
    Video Surveillance Products designed around our customers particular needs. Our expert Surveillance consultant has over 35 years experience in the business. Our Cameras are all HD. You demand it on your Television. Demand it for your Security!Video Surveillance In-A-Box is the result of exhaustive research and testing. My company has exclusive factory direct purchase power. No useless, costly middle-man or monthly fees!</div>
    
      <div id="col2">
    Video Surveillance Products designed around our customers particular needs. Our expert Surveillance consultant has over 35 years experience in the business. Our Cameras are all HD. You demand it on your Television. Demand it for your Security!Video Surveillance In-A-Box is the result of exhaustive research and testing. My company has exclusive factory direct purchase power. No useless, costly middle-man or monthly fees!</div>
    
      <div id="col3">
    Video Surveillance Products designed around our customers particular needs. Our expert Surveillance consultant has over 35 years experience in the business. Our Cameras are all HD. You demand it on your Television. Demand it for your Security!Video Surveillance In-A-Box is the result of exhaustive research and testing. My company has exclusive factory direct purchase power. No useless, costly middle-man or monthly fees!</div>
    
      <div id="clearance" style="clear:both;"></div>
    
    </div>
    
    
    <p style="text-align:center;"><a href="https://www.facebook.com/IpCamHd" target="_blank"><img src="images/facebook.jpg" alt="Like us on Facebook"></a> Follow us on Facebook!</p><br>
    <div style="clear:both;"></div></div></div></div>
    <div id="footer">&copy; 2012 <a href="http://ipcamhd.com/">IPCamHD.com</a> / Cromwell Drive, San Antonio, TX, 78201 / <a href="mailto:mattpilonsr@ipcamhd.com">Matt Pilon Sr.</a> / (210) 617-3519</div>
    </body></html>
    Last edited by mlegg; 01-19-2013 at 08:45 PM.

  2. #2
    Join Date
    Jan 2009
    Location
    NH
    Posts
    356
    Thanks
    54
    Thanked 10 Times in 10 Posts

    Default

    Here is my CSS, I thought by making the 90% it would leave a bit of the grey sides, so the page isn't just all white.

    Code:
    body {
      margin: auto;
      color : #000000;
      background-color: #CCCCCC;
      background-repeat : repeat;
      width : 90%;
    }
    
    #mainPicture {
      height: auto;
      width: 90%;
      margin: auto;
    }
    .contentBox {
      font-family: Georgia;
      font-size:18px;
      clear:both;
    }
    
    .innerBox {
      background-color : #ffffff;
      background-repeat : repeat-y;
      padding-top: 1em;
      padding-left: 1em;
      padding-right: 1em;
      padding-bottom : 1em;
    }
    #left_col {
       float:left;
       width:45%;
       padding:5px;
    }
    #right_col {
       float:right;
       width:45%;
       padding:5px;
    }
    
    
    #lft {
        float: left;
        width: 32%;
        padding:5px;
    }
    
    #mid { 
        float: left;
        width: 32%;
        padding:5px;
    }
    
    #rgt {
       float: left;
        width: 32%;
        padding:5px;
    }
    table#yourtable {
      margin: 0 auto;
    }
    #3column {
      width: 960px;
      margin-right: auto;
      margin-left: auto;
      text-align: center;
    }
    
    #col1 {
      margin: 10px;
      float: left;
      width: 285px;
    }
    
    #col2 {
      margin: 10px;
      float: left;
      width: 285px;
    }
    
    #col3 {
      margin: 10px;
      float: left;
      width: 285px;
    }
    
    #footer {
      background-color: #595959;
      max-width : 960px;
      text-align : center;
      font-size : 16px;
      font-family: Georgia;
      color : #FFFFFF;
      padding-top: 5px;
      padding-bottom: 5px;
    }
    #footer a:link {
    color : #FFFFFF;
    text-decoration : underline;
    }
    #footer a:visited {
    color : #FFFFFF;
    text-decoration : underline;
    }
    #footer a:hover {
    color : #000000;
    background-color : #FFFFFF;
    text-decoration : underline;
    }
    #footer a:active {
    color : #FFFFFF;
    background-color : #FFFFFF;
    text-decoration : underline;
    }
    /* Smartphones (portrait and landscape) ----------- */
    @media only screen
    and (min-width : 320px)
    and (max-width : 480px) {
    /* Styles */
    }
    /* Smartphones (landscape) ----------- */
    @media only screen
    and (min-width : 321px) {
    /* Styles */
    }
    /* Smartphones (portrait) ----------- */
    @media only screen
    and (max-width : 320px) {
    /* Styles */
    }
    /* iPads (portrait and landscape) ----------- */
    @media only screen
    and (min-width : 768px)
    and (max-width : 1024px) {
    /* Styles */
    }
    /* iPads (landscape) ----------- */
    @media only screen
    and (min-width : 768px)
    and (max-width : 1024px)
    and (orientation : landscape) {
    /* Styles */
    }
    /* iPads (portrait) ----------- */
    @media only screen
    and (min-width : 768px)
    and (max-width : 1024px)
    and (orientation : portrait) {
    /* Styles */
    }
    /* Desktops and laptops ----------- */
    @media only screen
    and (min-width : 1224px) {
    /* Styles */
    }
    /* Large screens ----------- */
    @media only screen
    and (min-width : 1824px) {
    /* Styles */
    }
    /* iPhone 4 ----------- */
    @media
    only screen and (-webkit-min-device-pixel-ratio : 1.5),
    only screen and (min-device-pixel-ratio : 1.5) {
    /* Styles */
    }

  3. #3
    Join Date
    Jul 2008
    Location
    Derbyshire, UK
    Posts
    1,982
    Thanks
    16
    Thanked 311 Times in 309 Posts
    Blog Entries
    11

    Default

    Try adding
    Code:
    #mainPicture img { max-width:100%; height:auto; }
    so, we're not using an explicit size for the img - we're letting it resize up or down automatically.

    IE8 needs something extra though so create a conditional stylesheet with an additional width:auto; in it.
    Focus on Function Web Design | Latest News RSS | Facebook | Twitter |
    Fast Edit (A flat file, PHP web page editor & CMS. Small, FREE, no database!) | Fast Edit BE (Snippet Manager) (Web content editor for multiple editable regions!) | Fast Apps |
    The only limit to creativity is imagination: JemCon.org

  4. #4
    Join Date
    Jul 2008
    Location
    Derbyshire, UK
    Posts
    1,982
    Thanks
    16
    Thanked 311 Times in 309 Posts
    Blog Entries
    11

    Default

    Ps - you could also use device size media queries to serve a resized image to smaller screens:http://css-tricks.com/snippets/css/m...ndard-devices/

    This way you're not forcing somebody on a teeny weeny smartphone to download a huge pic - you can serve them an img that's easier on bandwidth. That's probably going to fair better with iPhone/iPad - there's a 25k limit on cache size for those so if all your resources (css files, images, etc) come in under 25k each, they'll be cached and the user won't have to wait for them to download afresh on every view.
    Focus on Function Web Design | Latest News RSS | Facebook | Twitter |
    Fast Edit (A flat file, PHP web page editor & CMS. Small, FREE, no database!) | Fast Edit BE (Snippet Manager) (Web content editor for multiple editable regions!) | Fast Apps |
    The only limit to creativity is imagination: JemCon.org

  5. #5
    Join Date
    Jan 2009
    Location
    NH
    Posts
    356
    Thanks
    54
    Thanked 10 Times in 10 Posts

    Default

    I have the media queries in the css already. I just tried the max-width 100% but it didn't stretch the image wider or scale the image down.

  6. #6
    Join Date
    Jul 2008
    Location
    Derbyshire, UK
    Posts
    1,982
    Thanks
    16
    Thanked 311 Times in 309 Posts
    Blog Entries
    11

    Default

    Quote Originally Posted by mlegg View Post
    I have the media queries in the css already.
    Code:
    /* Smartphones (portrait and landscape) ----------- */
    @media only screen
    and (min-width : 320px)
    and (max-width : 480px) {
    /* Styles */
    }
    /* Smartphones (landscape) ----------- */
    @media only screen
    and (min-width : 321px) {
    /* Styles */
    }
    /* Smartphones (portrait) ----------- */
    @media only screen
    and (max-width : 320px) {
    /* Styles */
    }
    /* iPads (portrait and landscape) ----------- */
    @media only screen
    and (min-width : 768px)
    and (max-width : 1024px) {
    /* Styles */
    }
    /* iPads (landscape) ----------- */
    @media only screen
    and (min-width : 768px)
    and (max-width : 1024px)
    and (orientation : landscape) {
    /* Styles */
    }
    /* iPads (portrait) ----------- */
    @media only screen
    and (min-width : 768px)
    and (max-width : 1024px)
    and (orientation : portrait) {
    /* Styles */
    }
    /* Desktops and laptops ----------- */
    @media only screen
    and (min-width : 1224px) {
    /* Styles */
    }
    /* Large screens ----------- */
    @media only screen
    and (min-width : 1824px) {
    /* Styles */
    }
    /* iPhone 4 ----------- */
    @media
    only screen and (-webkit-min-device-pixel-ratio : 1.5),
    only screen and (min-device-pixel-ratio : 1.5) {
    /* Styles */
    }
    Yes, but you havent defined anything in them yet. The queries you posted for the different devices are empty so you need to add your custom CSS (heights, widths) in those.

    BUT, with the image defined already in the src of the img tag (directly in the markup), you cant switch in different images via the CSS media queries. What you could do however, is to set the src to point to a transparent gif, but then set the logo as a background-image on the img tag. You'll then be able to switch in different sized background-images according to the chosen size for your device media query.

    Quote Originally Posted by mlegg View Post
    I just tried the max-width 100% but it didn't stretch the image wider or scale the image down.
    That's because you didnt define it against the img - you did
    Code:
    #mainPicture { max-width:100%; height:auto; }
    instead of
    Code:
    #mainPicture img { max-width:100%; height:auto; }
    You only used the CSS against the #mainPicture div container. Remember, we're targetting the img here rather then the containing div - the img is what you want to automatically resized.
    Last edited by Beverleyh; 01-17-2013 at 12:11 PM.
    Focus on Function Web Design | Latest News RSS | Facebook | Twitter |
    Fast Edit (A flat file, PHP web page editor & CMS. Small, FREE, no database!) | Fast Edit BE (Snippet Manager) (Web content editor for multiple editable regions!) | Fast Apps |
    The only limit to creativity is imagination: JemCon.org

  7. #7
    Join Date
    Jan 2009
    Location
    NH
    Posts
    356
    Thanks
    54
    Thanked 10 Times in 10 Posts

    Default

    I copied the media query from the link you provided above. I also added the img and the image does scale down correctly. It does not grow larger.

    or do I have to make a larger image so it will scale down? the current banner I made in Photoshop is 960px X 200 px

    now I just noticed a small separation between the banner and the css menu

  8. #8
    Join Date
    Jul 2008
    Location
    Derbyshire, UK
    Posts
    1,982
    Thanks
    16
    Thanked 311 Times in 309 Posts
    Blog Entries
    11

    Default

    Quote Originally Posted by mlegg View Post
    I copied the media query from the link you provided above.
    Those are the queries for targetting different device sizes but but there are no styles defined in them. Where it says " /* Styles */ " you would need to define whatever CSS you wanted to adopt in that particular device, so this is where you could, if you wanted to, changes image dimensions or font-size. You would have to decide that based on your own requirements though.

    Quote Originally Posted by mlegg View Post
    I also added the img and the image does scale down correctly. It does not grow larger.

    or do I have to make a larger image so it will scale down? the current banner I made in Photoshop is 960px X 200 px

    now I just noticed a small separation between the banner and the css menu
    You could make a larger image but I dont recommend going too big - maybe one that is 1400px maximum. What I recommend in conjunction with that is capping the width of all your content to a max-width of 1400px too. Whatever width you decide, just match the content with the banner image.

    At the moment, all of your content width is flowing off into infinity which looks rather odd on very wide monitors, so limiting the width retains a degree of control in an ever expanding uncertainty. How wide will monitor/screen resolutions go in the future? Who knows, but here's how things look at the mo: http://www.w3schools.com/browsers/br...ion_higher.asp

    Of course you don't need to make a wider image at all. You could keep the 960px one and cap your content to match; max-width:920px;

    Alternatively, if you prefer your content to flow wider, you can cap content width at, say, 1280px but set the #mainPicture div's background as white. Your banner is mainly white so it should look OK. It just depends what you want to do.
    Focus on Function Web Design | Latest News RSS | Facebook | Twitter |
    Fast Edit (A flat file, PHP web page editor & CMS. Small, FREE, no database!) | Fast Edit BE (Snippet Manager) (Web content editor for multiple editable regions!) | Fast Apps |
    The only limit to creativity is imagination: JemCon.org

  9. #9
    Join Date
    Jan 2009
    Location
    NH
    Posts
    356
    Thanks
    54
    Thanked 10 Times in 10 Posts

    Default

    thank, I will work on the media query later. I made the banner image 1280px wide and added background-color: #FFFFFF; to the css but how do I get rid of the slim grey line under the banner/over the nav menu bar??

  10. #10
    Join Date
    Jul 2008
    Location
    Derbyshire, UK
    Posts
    1,982
    Thanks
    16
    Thanked 311 Times in 309 Posts
    Blog Entries
    11

    Default

    Code:
    <div id="mainPicture"><img src="images/main-logo.jpg" alt="IPCAMHD logo"></div>
        <!--[if lt IE 9]>  
        <script src="http://html5shiv.googlecode.com/svn/trunk/html5.js"></script>  
        <![endif]-->  
    </head>
    It might be because you have the closing </head> tag after the banner image markup (ie - your banner image is inside the <head> section)

    You also have a closing </body> tag at the end of your page but no opening <body> tag earlier on in the document.

    I know that strictly speaking, you dont need to define the head or body section in HTML5 (or did that start in an earlier HTML version?) but as you've overlooked some mis-matched pairs, its probably inducing a few errors and browsers rendering troubles. If I were you, I'd err on the side of caution and define them in the correct places rather than omit/mis-match them.

    If you correct the page structure, it should hopefully fix things.

    Reference for HTML5 page structure: http://css-tricks.com/snippets/html/...age-structure/

    Also, you can use the W3C Validator to help pin-point/fix markup issues: http://validator.w3.org/
    Focus on Function Web Design | Latest News RSS | Facebook | Twitter |
    Fast Edit (A flat file, PHP web page editor & CMS. Small, FREE, no database!) | Fast Edit BE (Snippet Manager) (Web content editor for multiple editable regions!) | Fast Apps |
    The only limit to creativity is imagination: JemCon.org

Similar Threads

  1. Resizable textarea and Opera
    By james438 in forum Computer hardware and software
    Replies: 5
    Last Post: 09-29-2012, 03:30 AM
  2. resizable iframe help
    By wordgeist in forum HTML
    Replies: 8
    Last Post: 05-01-2010, 08:34 PM
  3. resizable and movable popup with javascript
    By autofocus in forum JavaScript
    Replies: 1
    Last Post: 01-22-2010, 02:44 PM
  4. problem of resizable iframe and scrollbar
    By moumou in forum JavaScript
    Replies: 1
    Last Post: 04-24-2009, 06:32 AM
  5. Resizable IFrame
    By arupranjans in forum JavaScript
    Replies: 4
    Last Post: 04-22-2009, 10:36 PM

Tags for this Thread

Bookmarks

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •