图像未正确调整大小

时间:2016-08-13 01:29:30

标签: css amp-html

这是我的测试放大器页面,我可以验证并使一切工作除了一件事 - 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);
}

3 个答案:

答案 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%;
}

注意:

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

答案 2 :(得分:0)

从css class

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