如何让我的 AdRotator 广告留在 div 内？答案

【问题标题】：How can I get my AdRotator ads to stay within the div?如何让我的 AdRotator 广告留在 div 内？
【发布时间】：2021-01-18 06:17:15
【问题描述】：

我以典型的方式（我认为）设置了一个 AdRotator，带有一个像这样的 xml 文件：

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

...并像这样将其添加到我的 html 中：

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

我认为这应该将 AdRotator 图像保留在该列中，但它们会溢出整个页面 - 进入中间列和右列：

图片/广告应保持在黑色矩形内。为什么图像/“广告”会溢出它所在的 div，我该如何强制它保持在界限内？

更新

当我更换超链接的 AdRotator 时，我遇到了同样的问题：

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

【问题讨论】：

标签： html twitter-bootstrap ads adrotator

【解决方案1】：

请分享更多 html wand 尝试你想要达到的目标。但是根据我所看到的，就像你所做的row > col > row 一样没用。只是停留在你首先做的事情上。然后要修复 img 宽度，您需要添加如下类：mh-100 mw-100 或：

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

这样您的图像将尊重您的容器。

因此，根据您上次的更新，我建议您试试这个：

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

【讨论】：