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

Question

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:

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>
. . .

Answer 1

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>
...............