Question

要获得全宽图像 - 要么我们使用img标记width:100%，要么div使用background-image。在这两种情况下，图像都会使用视口调整大小。

以上小提琴使用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%;
}

我的案例 我想要这种行为的原因是，我需要在地图图像上放置一些东西。我不允许使用谷歌地图API。并且标记必须位于所有视口大小的确切位置。

替代解决方案：如果解决方案无法解决，我想将标记添加到图像中并使用area标记。

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

JSFIDDLE

Answer 1

您可以使用Javascript将高度和宽度设置为绝对像素值。请参阅下面的更新小提琴和摘录：https://jsfiddle.net/LaurensSwart/yp3j6qwx/4/

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

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>

Answer 2

将scroll添加到background样式属性

background: url("demo.jpg") no-repeat scroll center top transparent;

Answer 3

您可以使用

background-size: initial

您的jsfiddle在以下链接上更新： https://jsfiddle.net/yp3j6qwx/5/

Answer 4

尝试此操作只需更改background-size: contain并添加no-repeat，center。

＆＃13;

div {
  background: url(https://i1.wp.com/hyderabad-india-online.com/wp-content/uploads/2009/11/hyd-urban-main.png) no-repeat center center;
  height: 300px;
  position: relative;
  background-size: contain;
}

a {
  position: absolute;
  left: 53%;
  top: 52%;
}

＆＃13;

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

＆＃13;

使用CSS或JS非大小调整全宽图像

4 个答案: