Question

标题中有一个主要问题，但这是我正在解决的问题：

我有一个图像，我试图根据窗口的大小调整页面大小。我想保持图像的原始宽高比可能更宽或更高。我找到了一种获得宽高比的方法，但是有没有办法根据屏幕上的其他项目计算出我在宽度和高度上有多少空间？

从那里我可以弄清楚如何相应地调整大小。

我不想基于窗口的大小，因为那里可能还有其他项目。我也在使用ionic2 / angular2，但我并不认为它在这个问题上起作用。

Answer 1

实现这一目标的最简单方法，以及我自己常用的解决方案是使用CSS background-size属性。不需要JS，只需对HTML和CSS进行一些调整。

基本上你要做的就是摆脱你的<img>元素，而是创建一个<div>。调整布局以使此div具有合适的大小和位置，然后通过CSS为其指定background-image。你最终会得到这样的东西：

CSS：

#myImg {
    background-image: url("../resources/img/myPic.png");
    background-size: contain;
    background-repeat: no-repeat;
    background-position: center;
}

HTML：

<div id="myImg">
</div>

我为#myImg设置的CSS属性执行以下操作：

background-image：设置图片的路径
background-size: contain：使用contain值，将图像缩放到最大尺寸，使其宽度和高度都适合div。这就是所有魔术在幕后发生的地方
background-repeat: no repeat：禁用重复背景图像。如果没有设置，则图像被平铺，以便覆盖整个div，这是我们不想要的。
background-position: center：将图像放在div的中心。

Browser support

如何使图像尽可能大，保持原始宽高比而不切割图像部分？

1 个答案: