css - 改变没有包装的图像的纵横比

我有图像A的宽度和高度，，我想改变图像B的纵横比，使纵横比A没有任何容器元素，例如div ，a等css - 改变没有包装的图像的纵横比

那么，图像B如何没有任何容器元素的纵横比？

2017-08-10 yakkisyou

你尝试'height：auto'在CSS上？ –

@AnhTuan我试过了，但没有奏效。你可以发布的CSS？ – yakkisyou

我发布了我的答案，你可以看看。 –

您可以尝试height: auto CSS属性。即使HTML属性width和height不保持长宽比，height: auto CSS也会解决这个问题。

.minisize { 
    height: auto!important 
}

我的代码演示。即使宽度为300px，高度为1px，仍然会显示保留宽高比的较小图像：https://jsfiddle.net/99qrn65L/

2017-08-10 02:08:31

谢谢，但在我的情况下，低尺寸图像的'src'与原点不一样。 – yakkisyou

它不依赖于源图像。当你的''具有'width'属性时，它可以工作，甚至没有我想象的。 –

* height：auto CSS会解决这个问题。* ** NO。** css如何知道原始图像的比例？这个方法只有在'src'与原点相同时才可能。 – yakkisyou

如果您想要在不使用容器的情况下更改宽高比，则可以对图像B使用变换。当然会扭曲图像，但这是不可避免的，因为你正在改变纵横比。

A scale变换将按指定的倍数收缩或展开元素。

为了达到此目的，您需要知道图像B的大小与图像A的相关程度。这不会是完全自动的。

在下面的示例中，我们有两个图像：A.是200x300，B.是400x100。

我们希望B到渐成规模为A一样的，所以我们需要削减B的宽度一半，并通过3乘它的高度在CSS中，这意味着我们做scaleX(0.5)和scaleY(3.0)。

最终的结果是这样的：

img:nth-child(2) { 
 
    transform: scaleX(0.5) scaleY(3.0); 
 
}

<img src="http://placehold.it/200x300"> 
 

 
<img src="http://placehold.it/400x100">

您还可以选择不同的号码，以获得相同的纵横比，但没有两个图像是完全一样的大小。例如，transform: scaleX(0.25) scaleY(1.5)会给你图像B在图像A的纵横比，但图像A的大小的一半。

2017-08-10 03:23:29 cjl750

回答