将 div 缩放为 div，如背景图片

Question

我正在开发一个网络应用程序，现在面临着一项相当棘手的任务。我有一张图片，我必须为其添加叠加层。

假设我有一张汽车图片。我需要在汽车图像上添加值，例如外部和内部温度。

为这些温度标签添加固定像素偏移很容易，但图像需要可缩放到每个屏幕高度和宽度方向。我想不出像 "background-size:contain;" 对图像所做的那样将 div 缩放到 div 的简单方法。

在我编写复杂的 javascript 缩放逻辑之前，有人可以指出正确的轨道吗？

Answer 1

如果您使用的是 SVG 图片，这会很简单： http://css-tricks.com/svg-text-typographic-designs/

这里有两个 CSS 的例子：

http://codepen.io/chriscoyier/pen/zxqdev
http://maketea.co.uk/2013/12/16/smooth-text-overlays-with-css-transforms.html

Answer 2

ww = window width
wh = window height
ow = Original Width of your image
oh = Original Height of your image
nw = New Width of your image
nh = New Height of your image
mt = Margin top to adjust image to the screen vertically
ox = overlay location x coordinate according to original size of the image
oy = overlay location y coordinate according to original size of the image
nox = New ox
noy = new oy
sf = scaling factor

根据屏幕尺寸，您的图片会有一个缩放系数。

sf = ww / ow -> we find our scaling factor
nh = oh * sf -> then calculate our new image height
mt = (oh - nh) / 2 -> amount we need to shift image up to center screen
nox = ox * sf -> new overlay x coordinate
noy = (oy * sf) - mt -> new overlay y coordinate

编辑

如果图像太宽，则需要调整此逻辑以水平而不是垂直移动图像

编辑 2

如果您只针对现代浏览器，则可以使用 CSS transform: scale(sx[, sy]); 。这将按比例调整 DIV 及其所有内容的大小 使用 transform: scale() 和 transform-origin: 0 0; 从左上角重新调整大小。

Answer 3

我从未测试过 CSS3 object-fit ，但我认为它对您的解决方案非常有用：

https://developer.mozilla.org/en-US/docs/Web/CSS/object-fit

https://dev.opera.com/articles/css3-object-fit-object-position/

将 div 缩放为 div，如背景图片

Scale div into div like background image

html

javascript

css

image

scale