圖像大小CCS問題 - Woocommerce商店

Question

我試圖使所有產品圖像相同的高度。我覺得我應該可以將以下內容添加到「.product-image」中：

height：300px; 寬度：自動; position：absolute;

但這不起作用。

下面是這個問題的鏈接頁面：

http://www.hothothot.com/shop/product-category/enter-at-your-own-risk-10/

我怎樣才能讓這些圖像大小相同？再次，我認爲他們應該受到.product-images的支配，但唯一可行的是當我更改媒體的更通用的「img」=全部，然後在網站上混淆其他圖像。

請幫忙。謝謝！

Answer 1

刪除height:auto;在你的代碼，如果你想要一個特定的height上，然後使用height:50px;或任何你想要的。

img{ 
    border-style:none; 
    vertical-align:top; 
    max-width:100%; 
    height:auto; // <--- Remove that 
} 

像picresize這樣的在線工具對您的案例http://www.picresize.com/有很大的幫助。您可以調整圖像的大小，即使使用height:auto;它也可以很好地工作。

Answer 2

您可以通過

.product-images img { 
    // css here 
} 

似乎有沒有類調用product-image引用他們，所以與類product-images this引用a標籤內的任何圖像。

但是，當所有圖像尺寸不同並且外部標籤具有最大寬度時，增加高度可能會導致某些圖像被拉伸並看起來很奇怪。

拉伸小圖像也可以使他們很塊。

如果這個想法是爲了整齊對齊，你可能會更好地設置.product-images標記的高度，並使圖像垂直對齊。

（此外，爲了使他們同樣大小的最簡單的方法可能是編輯圖像，並將它們上傳尺寸相同）

Answer 3

產品圖像類是圍繞圖片的鏈接。 圖像本身有兩個類：attachment-shop_catalog和wp-post-image。 所以，你可以嘗試這樣的事：

.attachment-shop_catalog .wp-post-image { 
    height:300px; 
} 

的另一個問題是，IMG已在HTML中指定的寬度和高度。

要確保圖像正確縮放，應該將寬度設置爲自動。 嘗試是這樣的：

.attachment-shop_catalog .wp-post-image { 
    height:300px !important; 
    width:auto !important; 
} 

我加重要，這樣它將覆蓋硬編碼的HTML尺寸！

希望這有助於