html图片原始比例

原始比例"/>

html图片原始比例

我来理解一下题主的意思。

题主希望通过百分比来设置图片的宽高，但需要根据具体的情况来说。假设你同时给 img 设置 width 和 height 的值为百分比。那么很有可能会造成图片变形，失真。为什么这么说呢？因为它们取值为 % 时， 是相对于父容器的 width 和 height 来计算。比如：

CSS:

.container {

width: 500px;

height: 200px;

border: 1px dashed #f36;

}

:root {

--width: 50%;

--height: 50%;

}

.element {

width: var(--width);

height: var(--height);

background-color: #09f;

}

那么计算出来的 width是 500px x 50% = 250px ，height 是 200px x 50% = 100px 。Percentage unit for width (or height)​codepen.io

如果我们把 .element 换成 img 会是一个什呢？

先来假设，如果 img 的原始尺寸是 200px x 200px ；那么根据上述的代码，图片实际变成了 250px x 100px 。而图片的宽高比是 1:1 ，但计算之后的宽高比却是 250:100 = 2.5 。这个时候就会使图片变形，甚至是失真。

在CSS的世界中来说，一般会这样来处理：