1. Advertising
    y u no do it?

    Advertising (learn more)

    Advertise virtually anything here, with CPM banner ads, CPM email ads and CPC contextual links. You can target relevant areas of the site and show ads based on geographical location of the user if you wish.

    Starts at just $1 per CPM or $0.10 per CPC.

force image to div or cell size

Discussion in 'CSS' started by lektrikpuke, Jul 26, 2009.

  1. #1
    Is there a way to force an image to a cell or div size without setting a size on the image directly (primarily keeping it from blowing out the div or cell - too large)?

    I have some ads that come as <a href="link-off-my-site.html"><img src="http://link-still-not-my-site.jpg"></a>

    Without using some type of script to separate the above so I can specify the size (and then reassemble), how can I force the image to play nice with my size specifications?

    Thanks for any ideas. :D
     
    lektrikpuke, Jul 26, 2009 IP
  2. AssistantX

    AssistantX Peon

    Messages:
    173
    Likes Received:
    10
    Best Answers:
    0
    Trophy Points:
    0
    #2
     
    <div style="width: 300px; height: 200px;">
    <a href="link-off-my-site.html">
    <img style="width: 100%; height: 100%;" src="http://link-still-not-my-site.jpg">
    </a>
    </div>
    Code (markup):
    Above, the linked picture is placed in a div that has a specific width and height (300px by 200px) in CSS. Using CSS, the image will stretch to the width and height of the div surrounding it, (300px by 200px).
     
    AssistantX, Jul 26, 2009 IP
  3. lektrikpuke

    lektrikpuke Well-Known Member

    Messages:
    297
    Likes Received:
    1
    Best Answers:
    1
    Trophy Points:
    113
    #3
    Thanks for the reply, but I don't want to have to modify the img parameters if possible. So, that would mean no width or height declarations in the image (as I get it almost exactly the way as my example). I can declare the div that surrounds the link/image, however that seems to do no good if the image is larger than the div itself (in any direction).
     
    lektrikpuke, Jul 26, 2009 IP
  4. AssistantX

    AssistantX Peon

    Messages:
    173
    Likes Received:
    10
    Best Answers:
    0
    Trophy Points:
    0
    #4
    <div style="width: 300px; height: 200px; overflow: hidden;">
    <a href="link-off-my-site.html">
    <img src="http://link-still-not-my-site.jpg">
    </a>
    </div>
    Code (markup):
    Where the div's overflow is hidden.
     
    AssistantX, Jul 26, 2009 IP
  5. lektrikpuke

    lektrikpuke Well-Known Member

    Messages:
    297
    Likes Received:
    1
    Best Answers:
    1
    Trophy Points:
    113
    #5
    Hmmm, that might be what I'll have to go with. I didn't think about just chopping off the excess (by hidden). Thanks.

    Any other ideas?
     
    lektrikpuke, Jul 26, 2009 IP
  6. AssistantX

    AssistantX Peon

    Messages:
    173
    Likes Received:
    10
    Best Answers:
    0
    Trophy Points:
    0
    #6
    Thats all I have without messing with the image.
     
    AssistantX, Jul 26, 2009 IP