2017-06-19 55 views
1

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

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; 
} 

回答

2

如果你想藍色邊框跨越父的整個寬度,父母添加到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-containerinline-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>

0

你可以包裹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; 
} 
+0

,與「動態」部分衝突,這將迫使水平圖像取容器的寬度的50%,而我希望它採取容器的寬度的100%。 – Hafez