javascript - 对象拟合和图像映射 css

Question

我有一个里面有图像的 div。以下是 CSS

img {
    width: 100%; /* or any custom size */
    height: 100%; 
    object-fit: contain;
}
body, html {
     height: 100%;
}
#mydiv {
    border:5px dashed #0000cc;
    position:absolute; 
    top:0; left:0; right:0; bottom:0; 
    margin:auto;
}

HTML 是 -

    <div id="mydiv" class="animated zoomIn">
            <img src="img/6.gif"/>
            <a href="test1.html" title="test" style="position: absolute; left: 22.98%; top: 14.85%; width: 20.58%; height: 15.15%; z-index: 2;"></a>
            <a href="test2.html" title="test2" style="position: absolute; left: 57.29%; top: 14.39%; width: 18.52%; height: 15.76%; z-index: 2;"></a>
            <a href="test3.html" title="test3" style="position: absolute; left: 0%; top: 39.39%; width: 19.21%; height: 19.24%; z-index: 2;"></a>
            <a href="test4.html" title="test4" style="position: absolute; left: 79.76%; top: 40.76%; width: 19.73%; height: 15.45%; z-index: 2;"></a>
            <a href="test5.html" title="test5" style="position: absolute; left: 20.75%; top: 67.42%; width: 21.44%; height: 15.3%; z-index: 2;"></a>
            <a href="test6.html" title="test6" style="position: absolute; left: 58.66%; top: 67.27%; width: 16.98%; height: 15%; z-index: 2;"></a>
    </div>

图像点击已从 this 生成网站

问题:当图像在 div 内适合对象时，因为它应该根据屏幕宽度和高度显示，图像映射(或所谓的)不会移动。简而言之，图像矩形(图像适合的区域)仍然填充 div。我的期望是图像会缩小其边界(当我将边界放在图像上时，它应该小于 div 的边界)从而正确放置图像映射。现在图像贴图被放置在整个屏幕上。

关于如何在具有图像对象拟合的图像中实现真正的响应式图像映射(或 href)的任何指示？

Answer 1

您可以使用object-fit: cover; 希望它能解决您的问题。这是我的解决方案。

img {
    width: 100%; /* or any custom size */
    height: 70vw; 
    object-fit: cover;
    object-position: center center;
}
body, html {
     height: 100%;
}
#mydiv {
    border:5px dashed #0000cc;
    position:absolute; 
    top:0; left:0; right:0; bottom:0; 
    margin:auto;
    overflow: hidden;
}

<div id="mydiv" class="animated zoomIn">
            <img src="https://i.imgur.com/J67Ukc8.jpg"/>
            <a href="test1.html" title="test" style="position: absolute; left: 22.98%; top: 14.85%; width: 20.58%; height: 15.15%; z-index: 2;"></a>
            <a href="test2.html" title="test2" style="position: absolute; left: 57.29%; top: 14.39%; width: 18.52%; height: 15.76%; z-index: 2;"></a>
            <a href="test3.html" title="test3" style="position: absolute; left: 0%; top: 39.39%; width: 19.21%; height: 19.24%; z-index: 2;"></a>
            <a href="test4.html" title="test4" style="position: absolute; left: 79.76%; top: 40.76%; width: 19.73%; height: 15.45%; z-index: 2;"></a>
            <a href="test5.html" title="test5" style="position: absolute; left: 20.75%; top: 67.42%; width: 21.44%; height: 15.3%; z-index: 2;"></a>
            <a href="test6.html" title="test6" style="position: absolute; left: 58.66%; top: 67.27%; width: 16.98%; height: 15%; z-index: 2;"></a>
    </div>