Image stretching due to AMP

Question

My images are stretching on this page and I cannot identify why. A fix would be much appreciated.

It seemed to first happen after I added Bootstrap, but I have a customized version of the bootstrap that only includes the grid system and form control stylings, so there shouldn't be a conflict.

https://codepen.io/Mortiferr/pen/MBNqxO

.text-centered {
    text-align: center;
}
.sku {
    color: gray;
}
.margin-minus-1 {
    margin-top: -1em;
}
.wrapper-link {
    text-decoration: none;
    color: inherit;
}
.wrapper-link:visited {
    text-decoration: none;
    color: inherit;
}
.wrapper-link:hover {
    text-decoration: none;
    color: inherit;
}
.product {
    border: 1px solid #DDDDDD;
    border-radius: 1%;
    margin-bottom: 1em;
}
.hamburger {
    font-size: 1.5em;
    padding: 0.1em 0 0.2em 0.3em;
    display: inline;
}
.headerbar {
    background-color: black;
    color: white;
    display: flex;
    align-items: center;
}
.site-name--container {
    display: inline-block;
    text-align: center;
    margin-left: auto;
    margin-right: auto;
}
.site-name {
    width: 10em;
    margin-top: 0.3em;
    margin-bottom: 0.3em;
}
.sidebar {
    padding: 2em;
    margin: 0;
}
.sidebar > li {
    list-style: none;
    margin-bottom: 10px;
}
.sidebar a {
    text-decoration: none;
}
.close-sidebar {
    font-size: 1.5em;
    padding-left: 1em;
    padding-top: 1em;
}
.get-price {
    padding-bottom: 1em;
}
.get-price-link {
    text-decoration: none;
    padding: 5px 15px;
    border: 1px solid #D83B34;
    color: white;
    background-color: #D83B34;
    text-transform: uppercase;
    font-weight: bold;
    letter-spacing: 0.1em;
}
.get-price-link:hover {
    text-decoration: none;
    padding: 5px 15px;
    border: 1px solid #D83B34;
    color: #D83B34;
    background-color: white;
    text-transform: uppercase;
    font-weight: bold;
    letter-spacing: 0.1em;
}
body {
    font-family: 'Open Sans', sans-serif;
}
.app-container {
    margin: 1em;
}

This is all I have as far as CSS goes, I really am not sure why this is occuring. Is it related to Bootstrap?

Answer 1

It's your JS that you have the delete tags around that's messing with the images. If you delete it and hard code the image src into the amp-img tag the images go to the right scale - so long as you replace the 1000x1000 with the 408x287 dimensions of the placeholder image. I'm guessing the Vue and v0.js are clashing.

Also I'm assuming where you have <!-- delete --> around all your Vue that you're aware that JS is not allowed in AMP. You can use amp-list the same way as you're using for the description info under the images to do the image URL as well if you want to automate the product listing fully.

Because of your Vue and a few other things you're sitting at quite a few errors (I pasted your code into the AMP Playground).