cách tạo lớp phủ trên hình thu nhỏ của bootstrap?

Question

Tôi đang sử dụng twitter bootstrap 2.1.1 với bố cục đáp ứng và tôi muốn đặt nhãn ở góc dưới cùng bên phải của hình ảnh. Một trong những vấn đề tôi đang gặp là vì nó đáp ứng khi hình thu nhỏ rộng hơn thì hình ảnh nó nổi quá xa. Vấn đề khác là tôi dường như không thể làm nổi nó ở bên phải. Tôi cũng nên thêm rằng mặc dù tôi muốn nó ở góc dưới bên phải tôi muốn nó bù đắp bởi một vài điểm ảnh để nó không phải là trên cạnh của hình ảnh. Ngoài ra, văn bản có thể luôn bị thiếu hình ảnh, đó chỉ là khi hình ảnh mặc định được hiển thị.

Dưới đây là html của tôi cho đến nay

<li class="span4"> 
    <div class="photo-group thumbnail"> 
    <a href="/recipes/50500235aa113eb1870001d8" class="photo-wrapper"> 
     <img alt="300x200&amp;text=photo" src="http://www.placehold.it/300x200&amp;text=Photo"> 
     <span class="label label-inverse photo-label">Photo Missing</span> 
    </a> 
    <div class="caption"> 
     <div class="pull-right"> 
     by <a href="https://stackoverflow.com/users/50494983aa113ebd5c000001"> 
    hadees 
     </a> 
     </div> 
     <a href="/recipes/50500235aa113eb1870001d8">Chocolate Crackle Cookies</a> 
    </div> 
    </div> 
</li> 

và đây là css của tôi

.content-header { 
    padding-bottom: 10px; 
} 

.thumbnail > a > img { 
    display: block; 
    margin-left: auto; 
    margin-right: auto; 
    max-width: 100%; 
} 

.photo-group .photo-wrapper { 
    position: relative; 
} 

.photo-group .photo-wrapper .photo-label { 
    position: absolute;  
    bottom: 0; 
} 

.photo-group .photo-wrapper .photo-label { 
    float: right; 
}​ 

Tôi cũng có một jsfiddle cho một ví dụ tốt hơn.

Có thể đúng cách để xử lý việc này là chỉ làm cho chiều rộng tối đa của photogroup 300 nhưng tôi nghĩ kiểu đó trông rất vui trên màn hình toàn màn hình.

Answer 1

Dưới đây là phiên bản của tôi về fiddle: http://jsfiddle.net/AdVCT/9/

Về cơ bản, bạn cần phải đặt một wrapper xung quanh cả hai hình ảnh và nhãn, do đó bạn hoàn toàn có thể xác định vị trí các nhãn trong wrapper này:

 <div class="photo"> 
      <img alt="..." src="..." /> 

      <span class="label label-inverse photo-label">Photo Missing</span> 
     </div> 

Và sau đó với một số CSS, bạn có thể thay đổi .photo thành trung tâm nhưng cũng chỉ lớn như hình ảnh bên trong nó (chú thích được định vị hoàn toàn, vì vậy nó được lấy ra khỏi dòng trang một cách hiệu quả và không ảnh hưởng đến chiều rộng của cha mẹ, v.v.):

.photo-group .photo-wrapper .photo { 
    position: relative; 
    margin: 0 auto; 
    display: table; 
} 

Và xóa lề trái: auto/margin-right: tự động từ quy tắc .thumbnail> a> img. Cuối cùng, để bù đắp nhãn hơi từ các cạnh của hình ảnh, hãy sử dụng:

.photo-group .photo-wrapper .photo-label { 
    position: absolute;  
    bottom: 5px; 
    right: 5px; 
} 

Và đặt 5px thành bất kỳ thứ gì bạn muốn bù trừ.