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

时间:2015-07-15 07:59:06

标签: javascript jquery html css css3

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

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

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

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

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

小提琴:http://jsfiddle.net/12q26xu7/2/

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>

2 个答案:

答案 0 :(得分:2)

只需设置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

答案 1 :(得分:1)

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

  • 让图片(或包裹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

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