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>

对象拟合和图像贴图CSS

1 个答案: