How can I get my AdRotator ads to stay within the div?

53 Views Asked by At

I've got an AdRotator set up in the typical way (I think), with an xml file like so:

<?xml version="1.0" encoding="utf-8" ?>
<Advertisements>
<Ad>
<ImageUrl>Images\Space3.jpg</ImageUrl>
<NavigateUrl>https://www.amazon.com</NavigateUrl>
</Ad>
<Ad>
<ImageUrl>Images\eatAtJoes.jpg</ImageUrl>
<NavigateUrl>https://www.gutenberg.org</NavigateUrl>
</Ad>
. . .
<Ad>
<ImageUrl>Images\thisSpace4Rent.png</ImageUrl>
<NavigateUrl>https://www.wikipedia.org</NavigateUrl>
</Ad>
</Advertisements>

...and am adding it to my html like so:

<div class="container">
  <div class="row">
    <div class="col">
      <asp:AdRotator ID="AdRotator1" runat="server" AdvertisementFile="~/AdRotatorLeft.xml" />
    </div>
. . .

I'm thinking this should keep the AdRotator images within that column, but they spill out over the whole page - into the middle column and the right column, also:

enter image description here

The images/ads should remain within the black rectangle. Why is the image/"ad" overflowing the div it's placed in, and how can I force it to remain within bounds?

UPDATE

I have the same exact problem when I change out the AdRotator for a Hyperlink:

<div class="container">
  <div class="row">
    <div class="col">
      <div class="row">
    <asp:HyperLink ID="HyperLink1" runat="server" NavigateUrl="https://www.amazon.com/Still-    Casting-Shadows-Shared-History/dp/0595397247/">
    <asp:image runat="server" ImageUrl="images/EatAtJoesCaptioned.png" /><br />
    <asp:Label runat="server" Text="Some Text"></asp:Label>
    </asp:HyperLink>
      </div>
    </div>
. . .
1

There are 1 best solutions below

0
On BEST ANSWER

Please share more html wand try to what you try to acheive. But like what you made row > col > row is useless, based on what I see. Just staop by what you made first. Then to fix img width, you need to add classes like: mh-100 mw-100 or:

style="max-width:100%; max-height:100%;"

This way your image will respect your container.

So based on your last update, I would recommand that you try this:

<div class="container">
  <div class="row">
    <div class="col">
      <div class="row mx-0">
    <asp:HyperLink ID="HyperLink1" runat="server" NavigateUrl="https://www.amazon.com/Still-    Casting-Shadows-Shared-History/dp/0595397247/">
    <asp:image style="max-width:100%; max-height:100%;" runat="server" ImageUrl="images/EatAtJoesCaptioned.png" /><br />
    <asp:Label runat="server" Text="Some Text"></asp:Label>
    </asp:HyperLink>
      </div>
    </div>
...............