不管它的高度如何，我可以將img伸展到其容器的寬度？

Question

..期待圖片在頂部和底部「裁剪」。我只希望它適合寬度100％，並希望變得比高度大，但不要離開某個容器。

這是怎麼做的？

Answer 1

如果你的意思是你想讓一個img伸展到一個容器的整個寬度，但高度也會被切斷，那麼你想要這樣的東西，你的問題有點大。

.container{ 
    width:300px; 
    height:300px; 
    overflow:hidden; 
    display:block;} 

.container img{ 
    width:100%; 
    vertical-align:middle; 
    } 

Answer 2

只需設置容器的CSS overflow財產hidden，給它一個固定的大小，把你的形象裏有一個固定的寬度，並做了:)

好了，差不多了。爲了讓它在頂部和底部裁切，您需要將圖像垂直居中放在框中。實現這一點的一個竅門是在圖像的任一側都有小小的文本節點，其容器div高度與line-height相同。給圖像vertical-align:middle應該垂直居中在你的div。