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响应，我尝试添加layout =＆＃34; responsive＆＃34;宽度=＆＃34; 186＆＃34;高度=＆＃34; 121＆＃34;

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

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

我的代码所在的代码是：

 <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标签本身及其父级的放大器img。 amp-img的元素级宽度和高度为186px×121px。我不确定你的javascript是什么，只是将宽度仅应用于底层img，保持高度动态并移除amp-img宽度和高度，以修复大小不匹配。

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

Answer 2

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

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

注意：

为特定div标记指定CSS类以应用属性。
根据边距和填充应用宽度百分比。

Answer 3

从css class

下面删除height属性

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

图像未正确调整大小

3 个答案: