我可以使用纯 CSS 将元素放置在灵活图像的右下角吗?

Question

以下示例中的覆盖图像应相对于较大的图像保持在同一位置，与容器的大小无关。

我在下面添加了 2 个"img_overlay"CSS 模块的示例，一个位于纵向测试容器(绿色(内，另一个位于绿色横向容器内。它适用于纵向，但不适用于横向，因为"img_overlay__container"(红色(延伸到父容器的整个宽度，而不是限制为黑色图像的宽度。如果红色容器与黑色图像一样宽，那么一切都会好起来的。

我也可以用一个简单的内联块让它适用于风景，但随后它就会中断肖像。

请注意，图像应该是灵活的，根据可用空间进行扩展和缩小，直至其自然大小，因此请不要使用固定尺寸的解决方案。并且叠加图像应保持其相对于黑色图像的大小比例(黑色图像的 25%(，以便它看起来与屏幕尺寸无关。

我应该补充一点，我正在Chrome版本59.0.3071.115(官方内部版本(上进行测试 (64 位(

我错过了什么还是当前的 CSS3 根本不可能？

编辑(14/07/2017(：我使容器可调整大小，以便于测试。 https://jsfiddle.net/rvmxpwq1/3/

$( ".test" ).resizable();

body {
	margin-bottom: 100vh;
}
.img_overlay {
display: inline-flex;
max-height: 100%;
}
.img_overlay__container {
position: relative;
background-color: rgb(255, 0, 0);
}
.img_overlay__img {
border-radius: 50%;
max-height: 100%;
max-width: 100%;
}
.img_overlay__overlay {
border-radius: 50%;
max-width: 25%;
	max-height: 25%;
position: absolute;
right: 0px;
bottom: 0px;
}
.test {
display: flex;
align-items: center;
justify-content: center;
background-color: rgb(0, 255, 0);
border: 3px solid rgb(0, 255, 0);
}
.test--1 {
width: 200px;
height: 300px;
}
.test--2 {
width: 300px;
height: 200px;
}
.test--3 {
width: 500px;
height: 500px;
}

<link href="https://code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css" rel="stylesheet"/>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script>
Portrait container (300x200): <strong>works</strong>, this is how it should always look at any container size.
<div class="test test--1">
<div class="img_overlay">
<div class="img_overlay__container">
<img class="img_overlay__img" src="https://dummyimage.com/400x400/000/ffffff.jpg&text=Image">
<img class="img_overlay__overlay" src="https://dummyimage.com/100x100/0000ff/ffffff.jpg&text=Overlay">
</div>
</div>
</div>
<br> Landscape container (200x300): <strong>does not work</strong>, because the overlay is not next to the image.
<div class="test test--2">
<div class="img_overlay">
<div class="img_overlay__container">
<img class="img_overlay__img" src="https://dummyimage.com/400x400/000/ffffff.jpg&text=Image">
<img class="img_overlay__overlay" src="https://dummyimage.com/100x100/0000ff/ffffff.jpg&text=Overlay">
</div>
</div>
</div>
<br> Large container (500x500): <strong>works</strong>, the images are not enlarged above their natural size.
<div class="test test--3">
<div class="img_overlay">
<div class="img_overlay__container">
<img class="img_overlay__img" src="https://dummyimage.com/400x400/000/ffffff.jpg&text=Image">
<img class="img_overlay__overlay" src="https://dummyimage.com/100x100/0000ff/ffffff.jpg&text=Overlay">
</div>
</div>
</div>

Answer 1

现在怎么样？

这是一个小提琴： https://jsfiddle.net/f9e2gkpk/5/

.wrapper{
	max-height: 100%;
	max-width: 100%;  
}
.img_overlay {
	display: inline-flex;
	max-height: 100%;
}
.img_overlay__container {
	position: relative;
	background-color: rgb(255, 0, 0)
}
.img_overlay__img {
	border-radius: 50%;
	max-height: 100vh;
	max-width: 100%;
}
.img_overlay__overlay {
	border-radius: 50%;
	width: 25%;
	position: absolute;
	right: 0px;
	bottom: 0px;
}
.test {
	display: flex;
	align-items: center;
	justify-content: center;
	background-color: rgb(0, 255, 0);
	border: 3px solid rgb(0, 255, 0);
	height: 100vh;
}

<div class="test test--2">
<div class="img_overlay">
<div class="img_overlay__container">
<div class="wrapper">
<img class="img_overlay__img" src="https://dummyimage.com/400x400/000/ffffff.jpg&text=Image">
<img class="img_overlay__overlay" src="https://dummyimage.com/100x100/0000ff/ffffff.jpg&text=Overlay">
</div>
</div>
</div>
</div>