javascript - 使用 CSS 或 JS 的非调整全宽图像

Question

要获得全宽图像 - 我们可以使用带有 width:100% 的 img 标签，也可以使用带有 的 div >背景图像。在这两种情况下，图像都会根据视口(viewport)调整大小。

JSFIDDLE :

上面的 Fiddle 使用 background-image 属性。我已经尝试了所有的背景选项，但它们都会在某个时候调整图像的大小。

有没有一种方法可以保留不随浏览器调整大小而调整大小的全宽图像？它可以隐藏左侧或右侧的某些部分但不调整大小。

HTML

<div>
<a href="#">Test</a>
</div>

CSS:

div {
  background: url(https://i1.wp.com/hyderabad-india-online.com/wp-content/uploads/2009/11/hyd-urban-main.png) center/cover;
  height: 300px;
  position: relative;
}

a {
  position: absolute;
  left: 53%;
  top: 52%;
}

我的案例 我想要这种行为的原因是，我需要在 map 图像上定位一些东西。我不允许使用谷歌地图 API。并且标记必须位于所有视口(viewport)尺寸的准确位置。

替代解决方案: 如果解决方案不可能，我正在考虑将标记添加到图像中并使用 area标签。

但我不确定该解决方案是否与所有浏览器兼容。

JSFIDDLE :

Answer 1

您可以使用 Javascript 将高度和宽度设置为绝对像素值。请参阅下面更新的 fiddle 和代码片段:https://jsfiddle.net/LaurensSwart/yp3j6qwx/4/

这样，当页面加载时，div 设置为视口(viewport)的 100%，但宽度和高度是绝对值(而不是百分比，它们不会在视口(viewport)调整大小时改变)。 希望对您有所帮助!

var w = Math.max(document.documentElement.clientWidth, window.innerWidth || 0);
var h = Math.max(document.documentElement.clientHeight, window.innerHeight || 0);

$('#map').css('width',w).css('height',h);

html, body {
  overflow: hidden;
}

div {
  background: url(https://i1.wp.com/hyderabad-india-online.com/wp-content/uploads/2009/11/hyd-urban-main.png) top left/cover; /* The position of the map needs to be fixed, i.e. top-left */
  position: relative;
}

a {
  position: absolute;
  left: 380px; /* These should be absolute values */
  top: 280px;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="map">
<a href="#">Test</a>
</div>