圖像邊框保持120x120，而圖像保持長寬比

我試圖在我的drupal 7網站上實現的目標是保持文章圖像的邊框對於所有圖像（120x120）都有一定的尺寸，而實際圖像自身則根據圖像樣式（100x100）並且中間對齊。（我無法提供示例圖像，因爲我沒有10個聲望點...）圖像邊框保持120x120，而圖像保持長寬比

因此，對於肖像圖像，高度將被限制爲100px，寬度將爲縱橫比是。與橫向圖像相反的東西，寬度被限制在100px，高度是縱橫比。

雖然灰色邊框保留120x120塊，並且不會根據圖像大小進行更改。

讓我知道你是否需要我網站上的任何代碼來幫助解決這個問題。

來源

2017-02-16 Steve-o

你可以添加一個片段與HTML，CSS和假像。 –

實現目標的最簡單方法是在父div上使用table-cell顯示屬性，並使用vertical-align: middle，並設置所需的邊框，高度和寬度。比你的img應該設置max-width和max-height屬性爲100％。因此，具有HTML結構是這樣的：

<div class="img-container"> 
    <img src="..." /> 
</div>

你的CSS可能是：

.img-container { 
    width: 120px; 
    height: 120px; 
    display: table-cell; 
    vertical-align: middle; 
} 

.img-container > img { 
    max-width: 100%; 
    max-height: 100%; 
    margin: 0 auto; 
    display: block; 
}

Codepen顯示結果：http://codepen.io/anon/pen/BpeOzG

來源

2017-02-16 20:42:55 Marcin

非常感謝您的建議。它幾乎解決了這個問題。它似乎與邊界一起工作，但圖像高度的問題依然存在。看看底部附近的輻射圖像，這裏是一個例子：[link]（http://bargains24.co.za/new-deals）這是我輸入到注射器模塊的CSS I： 'code ' .field-type-image {width：140px; height：140px; display：table-cell; vertical-align：middle; text-align：center; } .field-type-image> img { max-width：100％; 最大高度：100％; } –

這是輸入到注射器模塊的CSS I： '.field-type-image {0} 0％0％0％0％0％0％ height：140px; display：table-cell; vertical-align：middle; text-align：center; } .field-type-image> img { max-width：100％; 最大高度：100％; }' –

你是指圖像和邊界之間的額外空間？如果是這樣的話，原因在於默認情況下圖像呈現爲內聯，這意味着它與a，b，c，d等字母位於同一行上，而這個額外的空間用於像f，g，年。爲了解決這個問題，只需添加到'.img-container> img'' display：block;'，你的問題就解決了。在這裏，你還可以找到關於下降的很好的解釋：http://stackoverflow.com/questions/31444891/mystery-white-space-underneath-image-tag/31445364#31445364。 – Marcin

圖像邊框保持120x120，而圖像保持長寬比

回答

相關問題