Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Results 1 to 4 of 4
  1. #1
    Senior Coder
    Join Date
    May 2006
    Posts
    1,673
    Thanks
    28
    Thanked 4 Times in 4 Posts

    HTML5 - width=100% not valid problem

    Hi,

    In my HTML I have this code:

    Code:
    <img alt="My website pages" title = "My website pages" width="100%" height="150px" src="http://simpg.net/sys_images/simplepage.png"  >
    And it displays just fine.

    But when I validate it I get:
    Bad value 100% for attribute width on element img: Expected a digit but saw % instead.

    If I take out the width="100%" then the image doesn't stretch across the screen and doesn't look so good.

    Is there an "official" way to stretch the image to fill the screen width ?

    Thanks.


    .
    If you want to attract and keep more clients, then offer great customer support.

    Support-Focus.com. automates the process and gives you a trust seal to place on your website.
    I recommend that you at least take the 30 day free trial.

  • #2
    Regular Coder LearningCoder's Avatar
    Join Date
    Jan 2011
    Location
    The Pleiades
    Posts
    920
    Thanks
    76
    Thanked 29 Times in 29 Posts
    Use CSS:

    Give it an ID like so:
    Code:
    <img alt="My website pages" title="My website pages" id="image" src="http://simpg.net/sys_images/simplepage.png"  >
    Then in your CSS, do this:
    Code:
    #image
    {
    width: 100%;
    height: 150px;
    }
    Give that a try and re-validate your HTML.

    Kind regards,

    LC.

  • #3
    Senior Coder
    Join Date
    May 2006
    Posts
    1,673
    Thanks
    28
    Thanked 4 Times in 4 Posts
    THat worked
    If you want to attract and keep more clients, then offer great customer support.

    Support-Focus.com. automates the process and gives you a trust seal to place on your website.
    I recommend that you at least take the 30 day free trial.

  • #4
    Senior Coder
    Join Date
    Apr 2011
    Location
    London, England
    Posts
    2,120
    Thanks
    15
    Thanked 354 Times in 353 Posts
    This is because the width and height attributes of an img are (pixel) values, so "px" in the height attribute is also invalid.

    The previous post confirms that you can set these values in CSS.

    An alternative approach is to make the image the background to another element. However, stretching a background-image is only available from CSS3:

    Code:
    background-size: 100%; /* CSS3, or */
    
    .style1 {
            background: url(images/bg.jpg) no-repeat center center fixed;
            -webkit-background-size: cover;
            -moz-background-size: cover;
            -o-background-size: cover;
            background-size: cover;
    } /* IE 9+ */
    "I'm here to save your life. But if I'm going to do that, I'll need total uninanonynymity." Me Myself & Irene.
    Validate your HTML and CSS


  •  

    Posting Permissions

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