如何將div中的圖像移動到底部

好吧，我是CSS的初學者，我不知道這個問題的標題是否與我想知道的一樣。我在我製作的網站上有這個：
這個方框包含產品的特色圖片。現在圖像是一個矩形，我想在一個正方形中顯示它。如果衣服切斷，但女孩的臉部需要顯示，那也沒關係。
所以我的問題是有什麼辦法可以將這個圖像中心點移動到左上方？請隨時問我是否沒有明確表明您需要更多信息。
這是這個圖像被放置在的div名稱：如何將div中的圖像移動到底部

.attachment-post-thumbnail 
{ 
/*what to write here*/ 
}

基於這裏的意見是這部分的代碼：

來源

2017-06-02 Chaudhry Talha

發佈重新生成屏幕截圖和您現在遇到的問題的代碼。 –

您的圖片被設置爲div的背景，還是div內的獨立圖片元素？ – Kurt

@Kurt這不是我確定的背景圖片 –

我假設圖像定義爲背景圖像爲其容器.attachment-post-thumbnail。

此時背景圖像的大小很可能被設置爲cover，並且「中心居中」的位置（即水平和垂直）。

因此，您仍然可以使用background-size: cover，但將background-position: center top;添加到您的.attachment-post-thumbnail規則中，該規則應該將圖像的頂部與其容器的頂部對齊。如果這不起作用，您可以嘗試添加!important（即.attachment-post-thumbnail { background-position: center top !important; }）以執行此操作。

來源

2017-06-02 22:52:09 Johannes

是的，這正是我正在尋找的，但因爲這是wordpress，我覆蓋自定義CSS部分中的.attachment-post-thumbnail。所以wordpress實際上將圖片轉換爲300x300。也許問題是。總之謝謝你的幫助。 –

它肯定不會將圖像轉換爲300x300，因爲這會壓縮/扭曲它們（顯示整個圖像，但是失真）。它只是按照我描述的方式定位它們。 – Johannes

Ooo ...那麼你的答案不起作用：/我已經添加了'.attachment-post-thumbnail {{0}}背景位置：center top; }'如果我添加！重要它顯示一個警告'使用！重要'，但我仍然保存它，但它不工作。我在截圖中附加了更多代碼，可以幫助我們更好地理解問題。 –

如何將div中的圖像移動到底部

回答

相關問題