Question

我正在开展一个项目，其中我有一个幻灯片，图片如下：

img {
    width:100vw;
    height:100vh;
    object-fit:cover;
}

这使得图像全屏并且表现得像背景尺寸：封面，因此它们可以在任何屏幕尺寸上填充整个视口而不会失真。

我想在这些图片上用文字工具提示标记某些点。为此，我找到Tim Severien's Taggd，它在响应式图像上效果很好，但在我的情况下，object-fit:cover;属性会使标记位置不准确。

我已经尝试过从CSS hacks到改进Tim代码的所有内容，但我没有想法。如果您有任何解决方案或解决方法，请分享。

谢谢！

Answer 1

好吧，我实际上想做同样的事情。这是我所做的。也许它将对将来的人有所帮助。如果可以将此功能集成到taggd中，那就太好了。

function buildTags()
{

    // be aware that image.clientWidth and image.clientHeight are available when image is loaded
    var croppedWidth = false;
    var expectedWidth = 0;
    var croppedWidthHalf = 0;
    var imageWidth = 0;
    var croppedHeight = false;
    var expectedHeight = 0;
    var croppedHeightHalf = 0;
    var imageHeight = 0;
    var naturalRatio = image.naturalWidth/image.naturalHeight;
    var coverRatio = image.clientWidth/image.clientHeight;
    if(Math.abs(naturalRatio - coverRatio) < 0.01)
    {
        // the image is not cropped, nothing to do
    }
    else
    {
        if(naturalRatio > coverRatio)
        {
            // width is cropped
            croppedWidth = true;
            expectedWidth = image.clientHeight * naturalRatio;
            croppedWidthHalf = (expectedWidth - image.clientWidth)/2;
            imageWidth = image.clientWidth;
        }
        else
        {
            // height is cropped
            croppedHeight = true;
            expectedHeight = image.clientWidth / naturalRatio;
            croppedHeightHalf = (expectedHeight - image.clientHeight)/2;
            imageHeight = image.clientHeight;

        }
    }
    function calcy(y)
    {
        if(croppedHeight)
        {
            var positiony = y * expectedHeight;
            if(positiony >  croppedHeightHalf)
                return (positiony - croppedHeightHalf)/imageHeight;
            else // tag is outside the picture because cropped
                return 0; // TODO : handle that case nicely
        }
        else
            return y;
    }

    function calcx(x)
    {
        if(croppedWidth)
        {
            var positionx = x * expectedWidth;
            if(positionx > croppedWidthHalf)
                return (positionx - croppedWidthHalf)/imageWidth;
            else // tag is outside the picture because cropped
                return 0; // TODO : handle that case nicely
        }
        else
            return x;
    }

    var tags = [

      Taggd.Tag.createFromObject({
        position: { x: calcx(0.74), y: calcy(0.56) },
        text: 'some tag',
      }),
      Taggd.Tag.createFromObject({
        position: { x: calcx(0.9), y: calcy(0.29) },
        text: 'some other tag',
      }),

      ....
    ];
    var taggd = new Taggd(image, options, tags);

}
$(window).bind("load", function() {buildTags();});

Answer 2

不可能。想想用户是否拥有分辨率为1024x768的平板电脑，当用户将视图从水平变为垂直时，图像可以填充空间，但是您将丢失部分图像，松散的img质量等。跨设备的最佳方式是使用大图片并添加css

img {
   height: auto;
   width: 100%;
   display: block;
}

用图片填充图像背景;

响应式，封面适合的图像标记

2 个答案: