Làm cách nào để làm cho hình ảnh bắt đầu ở dưới cùng của vùng chứa?

Question

Tôi có hình ảnh cao bên trong một vùng chứa ngắn với overflow: hidden;. Phần dưới của hình ảnh bị cắt. Làm thế nào để làm cho đầu có được cắt giảm thay vì dưới cùng?

Answer 1

cung cấp cho các container css sau:

position:relative; 

và hình ảnh các css sau:

position:absolute; 
bottom:0px; 

T.B.
Rất đẹp (và rõ ràng) minh họa btw

Answer 2

Nếu hình ảnh của bạn chỉ là background-image của container, làm theo cách này:

#container { 
    background: url(your-image.jpg) no-repeat bottom left; 
} 

Nếu không, vị trí của các yếu tố img để dưới cùng của container, như @ Joseph đề nghị:

#container { 
    position:relative; 
} 

#container img { 
    position: absolute; 
    bottom: 0px; 
} 

Answer 3

Nếu container có chiều cao 300px ví dụ, công trình này:

.container { 
    overflow: hidden; 
    height: 300px; 
    position: relative; 
} 

.image { 
    position: absolute; 
    bottom: 0; 
}