Question

我试图在包装器中包含图像，保持其纵横比。然而，图像延伸出来。下面是一个示例放大器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" 
        width="150" 
        height="150">
    </amp-img>
</div>

渲染页面后，这是放大器版本

<div class="image-wrapper">
    <amp-img src="http://fyogi.com/public/images/products/mobiles/lg-google-nexus-5x-mqqci.c1.w150.jpg" layout="responsive" width="130" height="130" 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" width="130" height="130" src="http://fyogi.com/public/images/products/mobiles/lg-google-nexus-5x-mqqci.c1.w150.jpg"></amp-img>
</div>

在渲染后由放大器添加的样式下方，导致它将图像拉伸将min-width：100％添加到img元素

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

现在我可以通过添加 min-width：auto 来解决这个问题修复，但是它会破坏使用amp html布局响应的目的，以及doc，清楚地说，对于布局响应

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

问题陈述

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

Answer 1

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

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

Answer 2

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

对象适合：包含增大或减小图像的大小以填充容器，同时保留图像的宽高比。

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>

Answer 3

以下是可能有用的代码。

.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 个答案: