相對於圖像的CSS位置文本

Question

我想將圖像的右下角的文本定位在將被動態添加的圖像上，因此圖像可能會或可能不會佔用其容器寬度的100％其長寬比並保持在其容器的畫布內。

Codepen

My goal

這裏的問題是，該文本相對定位到圖像容器不是圖像本身，圖像不總是寬度的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; 
} 

Answer 1

如果你想藍色邊框跨越父的整個寬度，父母添加到img和文本，設置爲display: inline-block，並從該段父，它包裝您的圖像容器和段落移動text-align: center中心新的inline-block圖像容器和段落。

.slider_wrapper { 
 
    width: 400px; 
 
    /*height: 300px;*/ 
 
    margin: 40px auto; 
 
    border: 1px solid black; 
 
} 
 

 
.image-container { 
 
    border: 1px solid blue; 
 
} 
 

 
.report-image { 
 
    max-width: 100%; 
 
    max-height: 350px; 
 
    display: block; 
 
    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; 
 
    line-height: 1.35em; 
 
} 
 

 
.report { 
 
    text-align: center; 
 
} 
 

 
.image-holder { 
 
    position: relative; 
 
    display: inline-block; 
 
    vertical-align: top; 
 
}

<div class="slider_wrapper"> 
 
    <div class="report"> 
 
     <div class="image-container"> 
 
      <div class="image-holder"> 
 
      <img src="https://i.gyazo.com/057739911161ece76a09b16617b92e72.jpg" alt="John Doe" class="report-image"> 
 
      <span class="name">John Doe</span> 
 
      </div> 
 
     </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> 
 
</div>

如果邊框不需要展開父的整個寬度，只需將.image-container到inline-block和移動text-align: center到包裝.image-container家長和段落中心他們倆。

.slider_wrapper { 
 
    width: 400px; 
 
    /*height: 300px;*/ 
 
    margin: 40px auto; 
 
    border: 1px solid black; 
 
} 
 

 
.image-container { 
 
    border: 1px solid blue; 
 
    display: inline-block; 
 
    position: relative; 
 
} 
 

 
.report-image { 
 
    max-width: 100%; 
 
    max-height: 350px; 
 
    display: block; 
 
    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; 
 
    line-height: 1.35em; 
 
} 
 

 
.report { 
 
    text-align: center; 
 
}

<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> 
 
</div>

Answer 2

你可以包裹DIV添加到圖像：

<div class="image-container"> 
    <div class="image-wrapper"> 
    <img src="https://i.gyazo.com/057739911161ece76a09b16617b92e72.jpg" alt="John Doe" class="report-image"> 
    <span class="name">John Doe</span> 
    </div> 
</div> 

然後CSS：

.image-wrapper { 
    position: relative; 
    width: 50%; 
    margin: 0 auto; 
}