amp 图像被拉伸，用于响应式布局

Posted 2023-02-24

【中文标题】amp 图像被拉伸，用于响应式布局

【英文标题】：amp image getting stretched, for responsive layout

【发布时间】：2016-07-09 00:41:29

【问题描述】：

我试图在包装器中包含图像，保持其纵横比。然而，图像伸展。 以下是我遇到的问题的示例 amp html。

<style>
    .image-wrapper 
        width: 150px;
        height: 150px;
        background: teal;
    
    .image-wrapper img 
        height: auto;
        width: auto;
        max-width: 150px;
        max-height: 150px;
    
</style>
<div class="image-wrapper">
    <amp-img
        src="http://fyogi.com/public/images/products/mobiles/lg-google-nexus-5x-mqqci.c1.w150.jpg"
        layout="responsive" 
         
        >
    </amp-img>
</div>

渲染页面后，这是amp版本

<div class="image-wrapper">
    <amp-img src="http://fyogi.com/public/images/products/mobiles/lg-google-nexus-5x-mqqci.c1.w150.jpg" layout="responsive"   class="-amp-element -amp-layout-responsive -amp-layout-size-defined -amp-layout" id="AMP_1"><i-amp-sizer style="display: block; padding-top: 100%;"></i-amp-sizer>
    <img amp-img-id="AMP_1" class="-amp-fill-content -amp-replaced-content"   src="http://fyogi.com/public/images/products/mobiles/lg-google-nexus-5x-mqqci.c1.w150.jpg"></amp-img>
</div>

下面的样式是amp在渲染后添加的，导致拉伸图像，将min-width：100%添加到img元素

.-amp-fill-content 
    display: block;
    min-width: 100%;
    max-width: 100%;
    height: 100%;
    margin: auto;

现在我可以通过添加 min-width: auto 的解决方法修复此问题，但它会破坏使用 amp html 布局响应和文档的目的，明确表示对于 layout responsive

元素的大小调整为其容器元素的宽度，并调整其高度的大小自动调整为由宽度和高度属性给出的纵横比。

问题陈述

我有未知尺寸的图像源，但小于 150X150 像素，理想情况下，宽度或高度均为 150 像素。我需要将此图像在固定 150X150 分区的中心/中间（水平和垂直）对齐，如果可能的话，我希望将所有尺寸保持在 em/rem 中。

【问题讨论】：

检查此***.com/questions/33878352/… 可能会有所帮助。

已经看过了，帮不上忙:(

【参考方案1】：

这可能会很有帮助....

object-fit：contain 增加或减小图像的大小以填充容器，同时保持图像的纵横比。

https://ampbyexample.com/advanced/how_to_support_images_with_unknown_dimensions/

 <style>
.fixed-container 
  position: relative;
  width: 200px;
  height: 200px;
 
 amp-img.contain img 
  object-fit: contain;
 
   </style>

<div class="flex">
 <div class="fixed-container m1">
<amp-img class="contain"
  layout="fill"
  src="https://unsplash.it/400/300"></amp-img>
</div>
<div class="fixed-container m1">
<amp-img class="contain"
  layout="fill"
  src="https://unsplash.it/300/300"></amp-img>
 </div>
 <div class="fixed-container m1">
<amp-img class="contain"
  layout="fill"
  src="https://unsplash.it/200/300"></amp-img>
</div>
</div>

【参考方案2】：

这是可能有帮助的代码。

.image-wrapper img 
//      object-fit: contain; just this line alone can do below job but it's not working in IE. 
        top: 50%;
        left: 50%;
        width: auto;
        height: auto;
        right: inherit;
        bottom: initial;
        max-height: 100%;
        min-width: initial;
        transform: translate(-50%, -50%);
      

此代码也适用于响应式 AMP 轮播。

注意：不要尝试添加 !important 否则 AMP 验证将 失败了。

【参考方案3】：

尝试将 amp-img 添加到您的 CSS 代码中

.image-wrapper img, .image-wrapper amp-img 
    height: auto;
    width: auto;
    max-width: 150px;
    max-height: 150px;