放大图像拉伸，为响应布局 [英] amp image getting stretched, for responsive layout

问题描述

我试图在包装中包含图像，保持其纵横比。然而图像延伸出来。
下面是一个示例放大器html，我正在面对这个问题。

I am trying to contain an image in a wrapper, maintaining its aspect ratio. However the image stretches out. Below is a sample amp html, where I am facing the issue.

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

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

After rendering the page, this is the amp version

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

低于放大器在放大器中添加的样式导致将图片拉伸，在img元素中添加最小宽度：100％

Below style which is being added by the amp after render, caused it to stretch the image, adding min-width: 100% to the img element

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

现在我可以通过解决方法解决添加最小宽度：自动，但它会失去使用amp html布局响应的目的，并且文档明确指出，对于布局响应

Now I can fix this with a workaround by adding min-width: auto, but it would defeat the purpose of using amp html layout responsive, and the doc, clearly says that for layout responsive

根据其容器元素的宽度调整元素，并将其高度自动调整为由宽度和高度属性给出的宽高比。 p>

Element sized to the width of its container element and resizes its height automatically to the aspect ratio given by width and height attributes.

问题陈述

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

I have image source with unknown dimensions, but smaller than 150X150px, ideally, either width or height will be 150px. I need this image to be aligned in center/middle(both horizontal and vertical) of a fixed 150X150 division, also if possible I would like to keep all the dimensions in em/rem.

推荐答案

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

try by adding amp-img to your CSS code

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

这篇关于放大图像拉伸，为响应布局的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！