我想將圖像的右下角的文本定位在將被動態添加的圖像上,因此圖像可能會或可能不會佔用其容器寬度的100%其長寬比並保持在其容器的畫布內。相對於圖像的CSS位置文本
這裏的問題是,該文本相對定位到圖像容器不是圖像本身,圖像不總是寬度的100%。
如何將文字始終保留在圖像的右下角 - 無論其尺寸是什麼 - 本身,而不是容器?
HTML:
<div class="slider_wrapper">
<div class="report">
<div class="image-container">
<img src="https://i.gyazo.com/057739911161ece76a09b16617b92e72.jpg" alt="John Doe" class="report-image">
<span class="name">John Doe</span>
</div>
<p class="report-caption">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Animi, id quisquam error, laborum officiis ea quod voluptates tempore, repellendus temporibus assumenda optio qui! Est distinctio numquam, quia quidem placeat repudiandae.</p>
</div>
CSS:
.slider_wrapper {
width: 400px;
/*height: 300px;*/
margin: 40px auto;
}
.image-container {
position: relative;
width: 100%;
}
.report-image {
max-width: 100%;
max-height: 350px;
margin: 0 auto;
}
span.name {
position: absolute;
bottom: 0;
right: 0;
padding: 5px;
background-color: rgba(0, 0, 0, 0.5);
}
.report-caption {
margin-top: 30px;
text-align: center;
line-height: 1.35em;
}
,與「動態」部分衝突,這將迫使水平圖像取容器的寬度的50%,而我希望它採取容器的寬度的100%。 – Hafez