Question

下面示例中的叠加图像应该与较大的图像保持在相同的位置，而与容器的大小无关。

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

我可以使用简单的内联块使其适用于景观，但随后它会因肖像而中断。

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

我应该补充说我正在测试Chrome版本59.0.3071.115（官方版）（64位）

我是否遗漏了某些东西，或者目前的CSS3是不可能的？

编辑（2017年7月14日）：我使容器可调整大小，因此更容易测试。 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>

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

1 个答案: