图像未正确调整大小

Question

这是我的测试放大器页面，除了一件事之外，我能够验证并使一切正常工作 - https://www.hawaiidiscount.com/iva/amp/tours.html

标题图片下方的黄色按钮存在问题。尽管它们看起来反应灵敏，但它们下方有一个很大的间隙，显示在小屏幕上。

我认为问题是：

<amp-img src="https://www.hawaiidiscount.com/Portals/0/Skins/HD-custom-design-s/images/Trans.png" width="186" height="121" ></amp-img>

为了让 Trans.png 具有响应性，我尝试在 width="186" height="121" 后面添加 layout="responsive"

这导致按钮从页面上消失。

有没有办法解决这个问题？

图片所在的代码是：

 <div align="center">
                <amp-img src="/Portals/0/tours-cat.jpg"  itemprop="image" width="740" height="300" layout="responsive"></amp-img>
                <div class="ButtonContainer"> <a href="https://www.hawaiidiscount.com/oahu/tours.htm">
                  <div class="OIslandButtons">
                    <amp-img src="https://www.hawaiidiscount.com/Portals/0/Skins/HD-custom-design-s/images/Trans.png" width="186" height="121" ></amp-img>
                  </div>
                  </a> <a href="https://www.hawaiidiscount.com/maui/tours.htm">
                  <div class="MIslandButtons">
                    <amp-img src="https://www.hawaiidiscount.com/Portals/0/Skins/HD-custom-design-s/images/Trans.png" height="121" width="186" ></amp-img>
                  </div>
                  </a> <a href="https://www.hawaiidiscount.com/kauai/tours.htm">
                  <div class="KIslandButtons">
                    <amp-img src="https://www.hawaiidiscount.com/Portals/0/Skins/HD-custom-design-s/images/Trans.png" height="121" width="186" ></amp-img>
                  </div>
                  </a> <a href="https://www.hawaiidiscount.com/bigisland/tours.htm">
                  <div class="BIslandButtons">
                    <amp-img src="https://www.hawaiidiscount.com/Portals/0/Skins/HD-custom-design-s/images/Trans.png" height="121" width="186" ></amp-img>
                  </div>
                  </a> </div>
              </div>

这是按钮的 CSS：

.ButtonContainer {
    max-width:100%;
    height:auto;
}
.CatImg {
    max-width:100%;
    max-height:auto;
}
.OIslandButtons {
    display:inline-block;
    vertical-align:top;
    margin-right:-4px;
    background-image:url(https://www.hawaiidiscount.com/Portals/0/Skins/HD-custom-design-s/images/OahuB.jpg);
    background-size:100% auto;
    background-repeat:no-repeat;
}
.OIslandButtons:hover {
    background-image:url(https://www.hawaiidiscount.com/Portals/0/Skins/HD-custom-design-s/images/OahuR.jpg);
}
.MIslandButtons {
    display:inline-block;
    vertical-align:top;
    margin-right:-4px;
    background-image:url(https://www.hawaiidiscount.com/Portals/0/Skins/HD-custom-design-s/images/MauiB.jpg);
    background-size:100% auto;
    background-repeat:no-repeat;
}
.MIslandButtons:hover {
    background-image:url(https://www.hawaiidiscount.com/Portals/0/Skins/HD-custom-design-s/images/MauiR.jpg);
}
.KIslandButtons {
    display:inline-block;
    vertical-align:top;
    margin-right:-4px;
    background-image:url(https://www.hawaiidiscount.com/Portals/0/Skins/HD-custom-design-s/images/KauaiB.jpg);
    background-size:100% auto;
    background-repeat:no-repeat;
}
.KIslandButtons:hover {
    background-image:url(https://www.hawaiidiscount.com/Portals/0/Skins/HD-custom-design-s/images/KauaiR.jpg);
}
.BIslandButtons {
    display:inline-block;
    vertical-align:top;
    background-image:url(https://www.hawaiidiscount.com/Portals/0/Skins/HD-custom-design-s/images/BigIslandB.jpg);
    background-size:100% auto;
    background-repeat:no-repeat;
}
.BIslandButtons:hover {
    background-image:url(https://www.hawaiidiscount.com/Portals/0/Skins/HD-custom-design-s/images/BigIslandR.jpg);
}

Answer 1

在 chrome 中玩了一点 CSS 之后，我认为问题在于 img 标签本身及其父 amp-img。 amp-img 的元素级别宽度和高度为 186 像素 x 121 像素。我不确定您的 javascript 是什么，但仅将宽度应用于底层 img，使高度保持动态，并删除 amp-img 宽度和高度以修复大小不匹配。

不相关，但 .Phone div 似乎也存在一个错误，即当响应页面发生变化时它没有改变其高度，导致 .MainNav 按钮被按下。

Answer 2

请为图像包装 div 应用宽度。

.ButtonContainer div {
    float: left;
    width: 25%;
}

注意事项：

• 为特定的 div 标签指定一个 CSS 类以应用属性。
• 根据边距和内边距应用宽度百分比。

Answer 3

从 CSS 类下面删除 height 属性

@media screen and (max-width: 965px)
.Phone {
    //height: 147px;
    text-align: center;
    padding-right: 1%;
}