SitePoint Sponsor

User Tag List

Results 1 to 3 of 3
  1. #1
    SitePoint Enthusiast semicolon's Avatar
    Join Date
    Mar 2010
    Posts
    73
    Mentioned
    2 Post(s)
    Tagged
    0 Thread(s)

    Need this IMG to center horizontally + need it at 65% of page width (inline)

    Basically I need this image (and its border, if possible) to automatically adjust to 65% of whatever screen width it's being displayed in.

    HTML Code:
    <div style="margin-top: 35PX; WIDTH: 65%;" text-align="CENTER">
    <img style="BORDER: 44PX RIDGE GREY; OUTLINE-STYLE: OUTSET;" src="http://www.ntnews.com.au/images/uploadedfiles/editorial/pictures/2012/02/14/dolphin.jpg" alt="">
    </div>
    Thanks. Harder than I thought!

    s

  2. #2
    SitePoint Mentor bronze trophy
    John_Betong's Avatar
    Join Date
    Aug 2005
    Location
    City of Angels
    Posts
    1,807
    Mentioned
    73 Post(s)
    Tagged
    6 Thread(s)
    Quote Originally Posted by semicolon View Post
    Basically I need this image (and its border, if possible) to automatically adjust to 65% of whatever screen width it's being displayed in.

    HTML Code:
    <div style="margin-top: 35PX; WIDTH: 65%;" text-align="CENTER">
    <img style="BORDER: 44PX RIDGE GREY; OUTLINE-STYLE: OUTSET;" src="http://www.ntnews.com.au/images/uploadedfiles/editorial/pictures/2012/02/14/dolphin.jpg" alt="">
    </div>
    Thanks. Harder than I thought!

    s
    Try this:

    PHP Code:
    <div style="margin-top: 35px; text-align: center; background-color:#fc9; padding:4em">
      <
    img 
        style
    ="border: 44px ridge grey; outline-style: outset; width:65%; max-width:650px; max-height:473px" 
        
    src="http://www.ntnews.com.au/images/uploadedfiles/editorial/pictures/2012/02/14/dolphin.jpg" alt="fred" 
      
    />
      <
    br /><br />
      
    Maximum dimensions650x473px 
    </div
    Note that the enclosing DIV (which may not be necessary) defaults to 100% of the parent boyd/div/etc and the image is 65% of the image width with maximmums set so that the image does not grow larger than the original image dimensions.

  3. #3
    SitePoint Enthusiast semicolon's Avatar
    Join Date
    Mar 2010
    Posts
    73
    Mentioned
    2 Post(s)
    Tagged
    0 Thread(s)
    Hey, thanks John!


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
  •