个人中心
文章发布
退出
作者热门文章
- android - RelativeLayout 背景可绘制重叠内容
- android - 如何链接 cpufeatures lib 以获取 native android 库？
- java - OnItemClickListener 不起作用，但 OnLongItemClickListener 在自定义 ListView 中起作用
- java - Android 文件转字符串
24
4
我遇到了一个问题，我需要将一个元素放置在图像上特定位置的图像顶部(比如距顶部 20%，距左侧 30%)。
我建议的解决方案是将图像包装在一个具有 relative 位置的 div 中，然后将位置为 absolute 的元素放在顶部和左侧 - 很简单。但经过多次尝试，我无法让它工作，这似乎是浏览器中的不同行为。
当您加载页面下方的 fiddle 时，虚拟图像将在您加载页面时起作用，但是，当您开始在 Chrome 或 Firefox 中展开或缩小结果窗口时，您将开始看到红色的 div 包含图像。这会导致点远离其预期点。这不会发生在 Safari 中。
所以问题是:我怎样才能始终将图像紧紧包裹起来？
更新:响应回答:包含图像的 div 必须是其父级大小的 100%，不能大于或小于父级。
fiddle :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>最佳答案
让你的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);
});
});
关于javascript - 将 div 包裹在 img 宽度周围并保持 div 100% 高，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/31424658/
24
4
0
我目前有一堆看起来像这样的行: txt = "Can't print the value for "+arguments[1]+" before it's set"; 我在做 $('#mydiv').
我有一个网站，我试图以移动格式显示，但在宽屏幕上显示。我确信 iframe 是要走的路。 我正在尝试将 iframe 加载到 iPhone 的图像中。你可以看到一个例子 here . 一旦你看到它，你
我正在尝试使用 Xcode 中的 Storyboard创建如下所示的 View 。 为此，我添加了一个按钮和一个带有约束的标签，但这就是我得到的结果。文本不会从复选框下方开始。实现此目的的一种方法是创
我正在与 css 斗争以将文本包装在 div 中。我应用了空格、分词但没有任何反应。 链接 http://fiduciaryconsulting.org/index.php/services/90-s
关闭。这个问题需要debugging details .它目前不接受答案。 编辑问题以包含 desired behavior, a specific problem or error, and th
正如标题所说 - 如何将文本环绕在伪元素周围？请参见下面的示例: .area { position: relative; } .area:before { content: '';
每次我尝试在 CSS 中做一些看似简单的事情时，它都行不通。 我有一个包含 460x160 图像的内容 div。我想做的就是将图片放在右下角，然后用文字环绕它。 text text
每次我尝试在 CSS 中做一些看似简单的事情时，它都行不通。 我有一个包含 460x160 图像的内容 div。我想做的就是将图片放在右下角，然后用文字环绕它。 text text
我有一个流式布局，它已经为我工作了一段时间。我漂浮 不是右就是左。一个 div 通常会有一个图像和一个标题。 文本项正确地环绕在 float 周围。但是某些元素没有: 将做以下两件事之一:他们要么侵入
这是我的问题。我在另一个 div 中有内联 block div。 .timeEvents { width: 100%; overflow: hidden; text-align: cent
使用float，我可以让文本环绕figure标签中的图像，而不是环绕figcaption标签，因为出色地。将 float 添加到 figcaption 不会这样做。有什么建议吗？ 下面的代码在这里:h
如何让 div 2 环绕 div 1 ？ (两个 div 都包含文本) +---++------------------+ | || | | 1 ||
我有一个场景，我需要转换一个可以被 *this 链接的函数返回 std::optional>而不是 T& (原因超出了这个问题的范围)。我使用 std::reference_wrapper 的原因是因
我想我彻底搜索了这个网站，但找不到我的问题的答案；我也认为这很简单，但是经过几个小时的困惑之后，我已经放弃并决定寻求帮助...... 这是我的问题；我有一个 DIV，里面有两个 DIV；第一个 DIV
我有一个文本区域字段，其右上角有一个 div 框。我进行了广泛的搜索，但找不到一种方法可以让输入文本区域的文本环绕 div。 #wrapper { position: relative; wi
所以我在使用 FancyBox 时遇到了这个问题，当滚动页面主体(主页)时，框会随机向左和顶部移动位置。 附上 GIF 演示问题: 据我所知，我正在使用 Fancybox v2。 网址是here (在
我的 coinslider 周围有一个容器 div。我想围绕这个容器 div 包装文本。如何实现这一目标？ 现在我的 HTML 设置如下: 我的 CSS 是这样设置的: #mycontain
每次我尝试在 CSS 中做一些看似简单的事情时，它都行不通。 我有一个包含 460x160 图像的内容 div。我想做的就是将图片放在右下角，然后用文字环绕它。 text text
我有一个名为“content”的 DIV，其中我有一个图像作为边框/框架，我想绕过它。我都有一个大的整个框架(左、右、上、下)，它与它应该的宽度相匹配，而且我把它切碎了，所以我有四个单边框图像(lef
我正在使用 fieldset 在 div 周围创建带标题的边框。 这是代码: Sproc Details:
我是一名优秀的程序员,十分优秀！