Javascript 将div环绕img宽度，并保持div 100%高

我面临一个问题，我需要将一个元素放置在图像顶部的图像上的一个特定位置上（比方说，从顶部的20%和从左侧的30%）

我对此提出的解决方案是将图像包装在一个具有

相对位置
的div中，然后将元素放置在位置
绝对位置
顶部和左侧-简单。但经过多次尝试后，我无法实现这一点，而且浏览器中的行为似乎有所不同

加载页面时，虚拟图像将在加载页面时起作用，但当您开始在Chrome或Firefox中展开或缩小结果窗口时，您将开始看到包含图像的红色
div
。这会导致圆点从其预定点移开。这种情况在狩猎中不会发生

因此，问题是：如何始终将图像紧紧地包裹起来

更新：回答：包含图像的div必须是其父级的100%，不能大于或小于该值

小提琴：


html，
身体{
身高：90%；
填充：0；
保证金：0；
文本对齐：居中；
}
.儿童包装纸{
身高：50%；
}
.图像包裹{
位置：相对位置；
身高：100%；
显示：内联块；
背景：红色；
边框：1px纯蓝色；
}
.图像包裹图像{
最大高度：100%；
最大宽度：100%；
宽度：自动；
高度：自动；
垂直对齐：中间对齐；
}
.image wrap.point{
位置：绝对位置；
左：20%；
最高：30%；
边界半径：50%；
背景：#000000；
宽度：10px；
高度：10px；
}
只需将div的高度和宽度设置为自动
：

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


编辑

根据你更新的问题，为了保持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);
    });
});

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


让图像（或包装的
div
）获得父级
div
保持图像的纵横比
根据
视口高度
和
-宽度

正如我们一起尝试过的那样，我们不能仅用
CSS
来解决这个问题，这就是为什么我想到了以下想法：如果我们得到
父div
的高度，并将该高度应用于图像，会怎么样

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

选项1

添加以下jQuery片段（当然还有jQuery库），在调整窗口大小时，图像的比例将保持不变

$(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');
});

您还必须去掉CSS中针对
.image wrap
和
.image wrap img
所述的所有维度，因此您只剩下以下内容：

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

.image-wrap img {
  vertical-align: middle;
}


选项2

如果需要，还可以加入一个
框大小：边框框，因此边框将成为div的一部分，而不是位于div周围。但是，图像将溢出，这意味着您必须从图像中删除2个像素（或无论边框有多厚）。使用下面的jQuery可以很容易地做到这一点，它看起来很像顶部的jQuery，但经过编辑后可以使用
框大小调整

$(function() {
  var height = $('.child-wrapper').height();
  $( ".image-wrap" ).css('height', height + 'px');
  $( '.image-wrap img').css('height', height -2 + 'px');
});
    
$( window ).resize(function() {
  var height = $('.child-wrapper').height();
  $( ".image-wrap" ).css('height', height + 'px');
  $( '.image-wrap img').css('height', height -2 + 'px');
});


这两个示例都需要调整，以便它们的工作方式与您希望它在项目中的工作方式完全相同。
您好，谢谢，但很抱歉。图像包裹必须为其父级的100%高度。对不起，如果我不清楚这一点。我认为这是不可能的纯css，同时保持图像的限制。这是我最近来的一次：。问题是，内部图像需要一个宽度，以便在调整页面大小时，外部div能够调整到图像宽度。多谢您的尝试，但是如果我事先知道图像宽度，我可以给它一个动态值，并使div大小在该值附近吗？嗨，感谢您的回复，但是在小提琴中，图像包装器现在位于子容器之外。它必须是100%的高度。经过一些小的调整后，选项2在我的“真实”项目中为我工作！谢谢你的帮助！请注意，来自@Pete的JS答案可能也很有效，因为它们做的是相同的事情。还请注意，此答案中的选项1不被接受（仅2:）