1
我有一個包含圖像的容器,並且此圖像是從應用程序加載的,因此容器的尺寸是已知的圖像會有所不同。如何在容器中垂直和水平居中放置img - img可能會大於容器
我現在有下面的CSS:
#secondary_photos {
height: 100px;
width: 300px;
overflow: hidden;
}
#secondary_photos .small_photo {
float:left;
height: 100px;
width: 300px;
}
#secondary_photos .small_photo img{
height: 100%;
width: auto;
position: absolute;
bottom: 0px
}
#secondary_photos .small_photo img{
height: auto;
width: 100%;
position: absolute;
bottom: 0px
}
這個工程「沒關係」形成了我:它加載圖像,調整其大小,以佔據容器的寬度的100%,其位置,以便自下而上圖像的一半顯示在容器內 - 因此,如果在將寬度調整爲300像素後圖像的高度爲200px,則只顯示圖像的底部100px(任意設置)。
我試圖做的是始終顯示圖像的中間 - 所以在上面的例子中,圖像將顯示像素50-150(從上往下)..