如何在不使用 Javascript 的情况下将图像放在另一个图像的左上角？答案

【问题标题】：How to place an image on top left of another image without using Javascript?如何在不使用 Javascript 的情况下将图像放在另一个图像的左上角？
【发布时间】：2014-11-12 07:11:58
【问题描述】：

我在 div 的中心有一张图片

图像在父 div 中居中，使用以下 css：

img { margin:0px auto; }

图像可以有任意尺寸。

如何在不使用 Javascript 的情况下将放大镜（缩放）图像定位在图像的左上角，而主图像可以具有任意宽度或高度？

【问题讨论】：

如果您不想使用 JS，使用 CSS 的唯一方法是使用另一个元素预先包装 <img> 元素，例如 <div> 或 <figure>，或者甚至<picture>，这样您就可以相对于图像元素定位放大类。但是，这需要修改 DOM，要么需要手动更新文件，要么依赖 JS。

标签： html css image

【解决方案1】：

用户position:relative 和position:absolute。看看下面的 HTML 和 CSS。

HTML

<div class="parent">
  <div class="test"><img src="http://isc.stuorg.iastate.edu/wp-content/uploads/sample.jpg" border="0" />
    <img src="http://www.beyotta.net/images/icon_magnifier.png" border="0" class="absimg" />
  </div>
</div>

CSS

.parent {width:100%; height:400px; border:1px solid blue; text-align:center;}
.test
{  
  display:inline-block;
  position:relative;
}
.absimg
{
position:absolute;
top:5px;
left:5px;
}

FIDDLE DEMO

【讨论】：

【解决方案2】：

给出相对于图像的位置和相对于放大镜图像的绝对位置可以解决问题，这是我所做的演示。

http://jsbin.com/yumelamive/5/edit?html,css,output

【讨论】：

不是你想的那样。
我认为这会为你做这件事，因为它看起来很理想。
答案本身应包含相关代码，而不仅仅是链接。但是很难看出方法中有什么不符合要求。 @AbdulBasit，如果“不是这样”，你的情况是什么？

【解决方案3】：

我不确定它是否会起作用，但尝试使用之前会有所帮助

img:before {
    content: 'img/zoom.png ';
    position:absolute;
    top:0px;
    left:0px;
}

为了获得适当的帮助，至少提供一个 jsfiddle 或您的工作代码

【讨论】：

<img> 元素是empty based on W3C specification，因此它也不会接受任何伪元素，例如::before 和::after。

【解决方案4】：

试试用这个

jsfiddle

div{
content:"";
display:block;
height:300px;
width:300px; 
border:solid 1px #CCCCCC;
background-image: url("http://www.codeproject.com/KB/GDI-plus/ImageProcessing2/img.jpg");
position: absolute;    
}
div:before {
content:"";
background-image: url("http://icons.iconarchive.com/icons/icontexto/search/48/search-red-icon.png"); 
top:0;
left:0;
position:absolute;
width: 40px;
height: 48px;
}

【讨论】：

第一件事我不能限制 div 的宽度和高度，第二件事是图像应该放在页面内，因为它是动态的

【解决方案5】：

我会为图像制作一个 div，设置图像的背景并添加：

位置：相对；

对于那个 div。然后把放大镜放在div里面设置：

位置：绝对：顶部：0；左：0；

.图像{ 背景：网址（eiffel.jpg）；位置：相对；宽度：100px；高度：200 像素；} .image img { 位置：绝对；顶部：0；左：0：}

“相对”是任何“绝对”对象..相关的。

希望对你有帮助。

【讨论】：

问题是我不能限制父 div 和图像的宽度和高度。
您可以将 div 的尺寸设置为元素：style="width: 100px;height: 200px;"或者只是将两个图像都写入 div？

【解决方案6】：

将图像放大镜设置为absolute:position并使用left: right:作为正确的位置，然后将父div设置为position:relative

【讨论】：