图像未正确调整大小

Question

这是我的测试放大器页面，我可以在其中验证并使一切正常，除了一件事 - https://www.hawaiidiscount.com/iva/amp/tours.html

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

我认为问题是：

<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

从下方删除 height 属性 css class

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

Answer 2

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

无关，但 .Phone div 似乎也存在错误，当响应页面更改时它不会更改其高度，导致 .MainNav 按钮被按下。

Answer 3

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

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

备注：

为应用属性的特定 div 标签指定 CSS class。
根据边距和边距应用宽度百分比。

图像未正确调整大小

Images are not resizing correctly

css

amp-html