不使用 CSS 或 JS 调整全宽图像的大小答案

【问题标题】：Non Resizing full width image with CSS or JS不使用 CSS 或 JS 调整全宽图像的大小
【发布时间】：2017-03-27 06:52:54
【问题描述】：

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

JSFIDDLE:

上面的小提琴使用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:

【问题讨论】：

我不明白...所以你希望它在页面加载时填充一个区域但如果窗口调整大小则不改变大小？听起来你可以让图像填充一个 div，但只是在页面加载时在 javascript 中设置 div 的大小？我错过了什么吗？
@JasonGoemaat。是的，我猜这可能是一个解决方案。
标记应该在地图的中心还是可以在任何地方？
@JasonGoemaat 它必须在图像上的特定位置。假设图像为 3000x240，则标记应始终为 1000x100。很像谷歌地图上的标记

标签： javascript jquery html css image

【解决方案1】：

您可以使用 Javascript 将高度和宽度设置为绝对像素值。请参阅下面的更新小提琴和 sn-p：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>

【讨论】：

请注意：您仍然需要为a（地图标记）的位置设置绝对像素值，因为对于百分比值，对于每个不同的视口（当页面负载）。您还应该将背景定位在左上角，而不是居中，否则如果具有更小或更大视口的人加载页面，您的“坐标”也会发生变化。
我已更新我的答案以反映这些建议。

【解决方案2】：

将scroll 添加到您的background 样式属性

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

【讨论】：

【解决方案3】：

你可以使用

background-size: initial

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

【讨论】：

【解决方案4】：

试试这个，只需更改 background-size: contain 并添加 no-repeat、center。

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%;
}

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

【讨论】：

这将在特定视口后调整图像大小