www.webdeveloper.com
Results 1 to 8 of 8

Thread: Need idea about HTML5 Syntax

  1. #1
    Join Date
    Oct 2013
    Posts
    9

    Need idea about HTML5 Syntax

    i have just created a page using HTML5 but image is showing too small.
    How can i adjust image size using HTML5?

    Thanks !

  2. #2
    Join Date
    Oct 2013
    Posts
    484
    <img src="myimage.jpg" width="100" height="60" alt="My picture"/>

    width and height are in pixels. If you go larger than the original image size you may not like the results. For example, if the original image is 30x30 but you want 45x45, the image will probably be pretty fuzzy if you use width and height to try and "enlarge" it.

  3. #3
    Join Date
    May 2014
    Posts
    900
    What image? What site? No code, no site, we can't really help you!

    Though adjusting an image's size through the browser is usually -- as kevin2 mentioned -- rubbish. NOT that sizing something is HTML 5's job -- or that images in HTML 5 behave any differently than they did 15 years ago in HTML 3.2 -- so mentioning it's HTML 5 is kinda pointless.

    ALMOST sounds like you mean to be asking about CSS, which is for saying what things look like. HTML is just to say what things ARE.
    Last edited by deathshadow; 05-29-2014 at 10:41 AM.
    Java is to JavaScript as Ham is to Hamburger.

  4. #4
    Join Date
    May 2014
    Posts
    4
    i think you must go to youtube and see the html5 image tutorial to learn this process.

  5. #5
    Join Date
    May 2014
    Posts
    34
    Just resizing the image width and size.
    for example
    <figure>
    <img src="url" style="width:100%; height:50%;" alt="image name">
    </figure>

    if you want resizing the image width and height.

  6. #6
    Join Date
    May 2014
    Posts
    900
    Quote Originally Posted by Veeramanikandan View Post
    Just resizing the image width and size.
    for example
    <figure>
    <img src="url" style="width:100%; height:50%;" alt="image name">
    </figure>
    Assuming the image is actually a mathematical or scientific figure (which it probably isn't, which is why HTML 5 garbage like FIGURE and ASIDE are about as useful as ADDRESS and semantic as CENTER) and that the STYLE attribute has any business being used on a IMG tag.
    Java is to JavaScript as Ham is to Hamburger.

  7. #7
    Join Date
    Mar 2012
    Posts
    1,507
    Back in the pre-broadband days, it was useful to set the width (and/or height) of an image in the HTML because that reserved the space for it whilst the image loaded. Otherwise the layout shuffled about during page load. Nowadays, that isn't so much of problem, and you should generally use the CSS settings (see below). However, please note:

    1. Using the CSS settings to make images LARGER is often a bad idea, because the images quickly become fuzzy and look unprofessional.

    2. Using the CSS settings to make images SMALLER can waste bandwidth, unless it avoids downloading multiple copies of an image in different sizes. So that is less clear-cut.

    3. If you DO use the width or height setting on an image, you should generally only set one or the other. That way the system automatically scales the other dimension to preserve the aspect ratio. E.g. say you have a 300px by 150px image that you want to display 2/3 size, you can set:

    HTML code:

    <img class="reduced" src="path/name.jpg" alt="<!-- what the image shows -->">

    CSS code:

    .reduced {
    width:200px;
    }

    The image is displayed 200px by 100px. Note: Setting the display size in the CSS has the advantage that if there are multiple images you have scaled and you decide to change the scaling to 240px, you just amend the CSS to:

    .reduced {
    width:240px;
    }

    and ALL the images you have scaled with class="reduced" automatically adjust!

  8. #8
    Join Date
    Oct 2013
    Posts
    9
    Well, i tried this code and it really works and i am now able to fix the size in the form of % but on the other hand which kevin mention - <img src="myimage.jpg" width="100" height="60" alt="My picture"/> it gives an error at my end.

Thread Information

Users Browsing this Thread

There are currently 1 users browsing this thread. (0 members and 1 guests)

Posting Permissions

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



Recent Articles