这是我的测试放大器页面,我可以验证并使一切工作除了一件事 - 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);
}
答案 0 :(得分:2)
在使用chrome中的CSS玩之后我认为问题在于img标签本身及其父级的放大器img。 amp-img的元素级宽度和高度为186px×121px。我不确定你的javascript是什么,只是将宽度仅应用于底层img,保持高度动态并移除amp-img宽度和高度,以修复大小不匹配。
不相关,但是.Phone div似乎也存在一个错误,当响应式页面发生变化时,它不会改变它的高度,导致.MainNav按钮被按下。
答案 1 :(得分:1)
请为图像包装div应用宽度。
.ButtonContainer div {
float: left;
width: 25%;
}
注意:
答案 2 :(得分:0)
从css class
下面删除height
属性
@media screen and (max-width: 965px)
.Phone {
//height: 147px;
text-align: center;
padding-right: 1%;
}