Images are not resizing correctly

Question

This is my test amp page where I was able to validate and make everything work except one thing - https://www.hawaiidiscount.com/iva/amp/tours.html

There is an issue with the yellow buttons under the header image. Even though they appear responsive there is a large gap under them that shows on small screens.

I figured the problem is:

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

In order to make Trans.png responsive I tried adding layout="responsive" behind width="186" height="121"

This caused the button to disappear from the page though.

Is there any way to fix this issue?

My code where the images are is:

 <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>

And this is the CSS for the buttons:

.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

Please apply width for image wrapper div.

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

Notes:

• Specify a CSS class for the particular div tag for applying the properties.
• Apply width percentage based on the margin and padding.