Question

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

假设我有一辆汽车的图像。我需要在汽车图像上添加外部和内部温度等值。

为这些温度标签添加固定像素偏移量会很容易，但图像需要可以扩展到每个屏幕的高度和宽度。我想不出简单的方法将div缩放为div完全像“background-size：contain;”适用于图像。

在我编写复杂的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，就像背景图像一样

3 个答案: