Question

我正面临一个问题，我需要在图像上的特定位置放置一个元素（比如说从顶部看20％，从左边看30％）。

我提出的解决方案是将图像包装在具有relative位置的div中，然后将位置absolute的元素置于顶部和左侧 - 简单。但经过多次尝试后，我无法使其工作，并且在浏览器中似乎是不同的行为。

当您加载小提琴时，虚拟图像将在您加载页面时起作用，但是，当您在Chrome或Firefox中开始展开或缩小结果窗口时，您将开始看到包含的红色div图片。这会导致点远离其预期点。在Safari中不会发生这种情况。

所以问题是：我怎样才能始终将图像紧紧包裹起来？

更新：回答：包含图片的div必须是其父图片的100％，不能大于或小于该图片。

html,
body {
  height: 90%;
  padding: 0;
  margin: 0;
  text-align: center;
}
.child-wrapper {
  height: 50%;
}
.image-wrap {
  position: relative;
  height: 100%;
  display: inline-block;
  background: red;
  border: 1px solid blue;
}
.image-wrap img {
  max-height: 100%;
  max-width: 100%;
  width: auto;
  height: auto;
  vertical-align: middle;
}
.image-wrap .point {
  position: absolute;
  left: 20%;
  top: 30%;
  border-radius: 50%;
  background: #000000;
  width: 10px;
  height: 10px;
}

<html>

<body>
  <div class="child-wrapper">
    <div class="image-wrap">
      <img class="viewer__image" src="http://dummyimage.com/300">
      <div class="point"></div>
    </div>
  </div>
</body>

</html>

Answer 1

只需设置div auto的高度和宽度：

.image-wrap {
    position:relative;
    height: auto;
    width:auto;
    display: inline-block;
    background: red;
    border: 1px solid blue;
}

Updated fiddle

修改

根据您更新的问题，为了保持100％的高度但宽高比宽度，我不认为你可以用纯css做到这一点所以使用以下的js应该这样做：

$('.image-wrap').each(function () { var wrap = $(this), image = wrap.children('img:eq(0)'), ratio = image.width() / image.height(); wrap.data('ratio', ratio); }); $(window).resize(function () { $('.image-wrap').each(function () { var wrap = $(this), image = wrap.children('img:eq(0)'), width = image.height() * wrap.data('ratio'); image.width(width); wrap.width(width); }); });

Example

Answer 2

在基础知识中，您需要三种不同的东西：

让图片（或包裹div）获得父div的高度
保持图像的宽高比
根据viewport-height和-width

正如我们一起尝试过的那样，我们只能用CSS解决这个问题，这就是为什么我想出了以下想法：如果我们得到{{的高度怎么办？ 1}}，并将该高度应用于图像？

这就是我提供以下解决方案的原因：

选项1

添加以下jQuery（当然还有jQuery库），在调整窗口大小时保留图像的比例。

parent div

您还必须摆脱CSS $(function() { var height = $('.child-wrapper').height(); $( ".image-wrap, .image-wrap img" ).css('height', height + 'px'); }); $( window ).resize(function() { var height = $('.child-wrapper').height(); $( ".image-wrap, .image-wrap img" ).css('height', height + 'px'); });和.image-wrap中所述的所有维度，因此您将离开：

.image-wrap img

JSFIDDLE

选项2

如果你愿意，你也可以投入.image-wrap { position: relative; display: inline-block; background: red; border: 1px solid blue; } .image-wrap img { vertical-align: middle; }，所以边界正在成为div的一部分，而不是围绕它。但是，图像会溢出，这意味着您必须从图像中删除2个像素（或边框厚度）。您可以使用下面的jQuery轻松完成此操作，它看起来很像顶部的jQuery，但经过编辑后可以使用box-sizing: border-box;。

box-sizing

JSFIDDLE

这些示例都需要调整，因此它们的工作方式与您希望它在项目中的工作方式完全相同。

在img宽度周围包裹div并保持div高100％

2 个答案: