由 AMP 引起的图像拉伸

Question

我的图片在此页面上拉伸，我无法确定原因。将不胜感激。

它似乎是在我添加 Bootstrap 之后首先发生的，但我有一个自定义版本的 bootstrap，它只包括网格系统和表单控件样式，所以不应该有冲突。

.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;
}

就 CSS 而言，这就是我的全部，我真的不确定为什么会这样。跟Bootstrap有关系吗？

Answer 1

检查此解决方案是否适合您。将以下代码添加到您的 CSS.

.i-amphtml-layout-size-defined .i-amphtml-fill-content {
    position: relative;
    height: auto;
    width: 100%;
    max-width: 100%;
}

i-amphtml-sizer{
   padding: 0% !important;
}

Answer 2

是你的 JS 周围有删除标签，这会弄乱图像。如果您删除它并将图像 src 硬编码到 amp-img 标签中，图像将按正确的比例缩放 - 只要您将 1000x1000 替换为占位符图像的 408x287 尺寸即可。我猜 Vue 和 v0.js 有冲突。

此外，我假设您在所有 Vue 周围都有 ，您知道 AMP 中不允许使用 JS。您可以使用 amp-list 与在图像下使用描述信息相同的方式来制作图像 URL 如果您想要完全自动化产品列表。

由于您的 Vue 和其他一些东西，您遇到了很多错误（我将您的代码粘贴到 AMP Playground）。

由 AMP 引起的图像拉伸

Image stretching due to AMP

css

vue.js

amp-html