我正面临一个问题,我需要在图像上的特定位置放置一个元素(比如说从顶部看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>
答案 0 :(得分:2)
只需设置div auto
的高度和宽度:
.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);
});
});
答案 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
选项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
这些示例都需要调整,因此它们的工作方式与您希望它在项目中的工作方式完全相同。