英文:
TailwindCSS to exactly overlay two same-sized images and have them scale the same
问题
我有两个尺寸完全相同的图像，我希望将它们叠加在彼此上方（在z轴方向），并使它们实现以下效果：
- 适应包含的div（如果有意义的话，例如页眉），以及
- 当它们包含的div缩放时，以完全相同的方式缩放。
有点像在页眉中放置一个徽标，并且随着页面变窄，它应该缩放，只是现在有两个图像。
如果我的术语不准确，请原谅。
我有类似以下的东西：
<div class="inline-block">
<img src="/i1.png" class="XXX" />
<img src="/i2.png" class="XXX absolute top-0 left-0" />
</div>
但我不知道要在XXX中放什么。我尝试过h-full、w-full、w-fit等等，以及许多组合，但都没有成功。
我基本上只是希望它们像一个图像一样运行...
我想在TailwindCSS中实现它，请。
提前感谢您，
Ashley。
英文:
I have two images that are exactly the same size that I wish to overlay one on top of the other (in the z-direction) and have them:
- Fit inside the containing divs (if that makes sense, e.g. a header), and
- scale exactly the same way when their containing divs scales.
Something like having a logo in a header and as the page narrows it should scale, except that now there are two images.
Apologies if my terminology is not right there.
I have something like:
<div class="inline-block">
<img src="/i1.png" class="XXX" />
<img src="/i2.png" class="XXX absolute top-0 left-0" />
</div>
but don't know what to put in the XXX. I have tried h-full, w-full, w-fit,... and many combinations without success.
I basically just want them to behave as one image...
I would like to do it in TailwindCSS, please.
Thanks in advance,
Ashley.
答案1
得分: 1
你不需要为<img>元素添加任何其他类，但你需要在<div>父元素上应用position: relative，以便top: 0和left: 0相对于父容器：
<!-- begin snippet: js hide: false console: false babel: false -->
<!-- language: lang-html -->
<div class="inline-block relative">
<img src="https://picsum.photos/1920/1080" />
<img src="https://picsum.photos/1920/1080?0" class="absolute top-0 left-0" />
</div>
<!-- end snippet -->
英文:
You shouldn't need any other classes for the <img> elements, but you would need to apply position: relative on the <div> parent so that top: 0 and left: 0 will be relative to the parent container:
<!-- begin snippet: js hide: false console: false babel: false -->
<!-- language: lang-html -->
<script src="https://cdn.tailwindcss.com"></script>
<div class="inline-block relative">
<img src="https://picsum.photos/1920/1080" />
<img src="https://picsum.photos/1920/1080?0" class="absolute top-0 left-0" />
</div>
<!-- end snippet -->
通过集体智慧和协作来改善编程学习和解决问题的方式。致力于成为全球开发者共同参与的知识库，让每个人都能够通过互相帮助和分享经验来进步。
评论