Resize Image According to Window Size - HTML

Discussion in 'General Software Discussion' started by Crystallization, Oct 6, 2012.

  1. Crystallization

    Crystallization New Member

    Joined:
    Apr 5, 2007
    Messages:
    70
    Likes Received:
    2
    Trophy Points:
    0
    I've setup a custom box over at deviantART where I can add HTML code and I'd like for one of them to be able to display an image with a maximum width of 900px and a maximum height of 300px (3:1 ratio). I've already created an image with those dimensions but the problem that I'm having is that when I add the code <img src="image.jpg"/> the image appreas cut off on the right side when the window is smaller than 1920px wide. So I tried using <img src="image.jpg" width="auto" height="auto"/> but that does nothing and I also tried <img src="image.jpg" width="100%" height="100%"/> but than the image does not fill the maximum width of the custom box and looks like a letterbox with space on the left and right sides.

    Now there's another kind of box on deviantART called the Webcam widget which displays images but does not accept HTML code. I added the URL of my 900px wide by 300px tall image in that box and it displays it exactly the way I want it to, filling all corners of the box and resizing the image when the window is resized without distorting the ratio, but without the ability to add a click-through link, custom title, etc. it's not usable to me. :(

    I've setup an example of this on my main deviantART page HERE. Please check it out and tell me how I can achieve this through HTML. I'd much appreciate some assistance on this matter. Thank you.
     
  2. Takaharu

    Takaharu Unus offa, unus iuguolo

    Joined:
    Aug 31, 2009
    Messages:
    3,386
    Likes Received:
    401
    Trophy Points:
    108
    How about using a table and applying the picture as a background image for a cell?
     
  3. Crystallization

    Crystallization New Member

    Joined:
    Apr 5, 2007
    Messages:
    70
    Likes Received:
    2
    Trophy Points:
    0
    Admittedly I know only a little bit of HTML code at the moment. I'm willing to learn it, though. So how might I go about doing this? Sorry to be a pain. -_-
     

Share This Page

visited