css中的橫向和縱向圖像尺寸

什麼是最好的CSS來顯示我的類別圖像，以便它們不會被壓扁或顯示失真。css中的橫向和縱向圖像尺寸

圖片本身是1024×768，甚至與被設置爲400×400的縮略圖WordPress的/ Woocommerce設置，然後縮略圖的再生後仍有相同：

我可以更改CSS而不是HTML。

CSS：

ul.products li.product .img-wrap { 
    position: relative; 
    margin: 0 0 1em; 
    padding: 3px; 
    background: #fff; 
    border: 1px solid #e1e1e1; 
    height: 150px; 
    width: 150px; 
} 

    ul.products li.product img { 
    float: none; 
    margin-right: 0; 
    width: 100%; 
    }

來源

2013-05-09 Jess McKenzie

嘗試添加'高度：在'ul.products li.product IMG' – ROMMEL 2013-05-09 19:30:39

inherit'我改變了'高度：''到最大高度：'這似乎解決方案比率問題，儘管它們並不居中，但這可能更容易解決。 – Abernasty 2013-05-09 19:33:29

我沒有注意到實時鏈接。抱歉。我會去Marc Audet的回答 – ROMMEL 2013-05-09 19:36:18

一個可能的修復可能是：

ul.products li.product img { 
    float: none; 
    width: auto; 
    margin: 0 auto; 
}

這將與肖像風格縮略圖工作，但不知道有關的景觀風格。

這裏所要的是讓縮略圖適合150x150方框，而不管縮略圖的長寬比如何。

在woocommerce.css的534行，以下聲明：

ul.products li.product img { 
    display: block; 
    height: 150px; 
    width: 150px; 
}

我只想刪除高度/寬度值或將其設置爲自動。這將允許圖像縮放以適合父容器。

WordPress的也使用媒體查詢，所以CSS設置在多個地方在img的寬度/高度。例如，一睹風采線附近的1968年：

ul.products li.product img { 
    float: none; 
    margin-right: 0px; 
    width: auto; 
    margin: 0 auto; 
    max-height: 150px; 
    max-width: 150px; 
}

來源

2013-05-09 19:32:43

放大景觀圖像的最佳方式是什麼，但是還要保留li類，使其餘的數據保持一致？ – 2013-05-09 19:43:42

保持'.img-wrap'不變，因爲它定義了圖像的父容器，一個方形框，沒關係。 – 2013-05-09 19:45:17

我現在有，但自從它的設置爲150x150其顯示邊框圖像的邊緣，但如果我刪除它，我需要做以上 – 2013-05-09 19:46:58

好像你媒體鏈接解決的比例問題，但我看到的圖像中的至少一個流出容器。爲了解決這個問題擴展您IMG-包裝類溢出：隱藏

class="img-wrap" { 
    ... 
    overflow:hidden; 
    ... 
}

，從不使用寬度= 100;在img標籤上！這會吹起形象，並像地獄一樣blury - 這阻止它看起來專業。我建議也顯示圖像居中。爲此，我使用display：table-cell;技巧，然後將邊距左右設置爲自動。爲你新的CSS：

ul.products li.product img { 
    float: none; 
    margin-right: 0; 
    ---width: 100%; /*<- remove this line to unblury your image*/ 
    background-position: center; 
    display: table-cell; /* display trick to enable centering by margin*/ 
    margin-left: auto; 
    margin-right: auto; 
}

來源

2013-05-09 20:06:28 Hexodus

謝謝，這使我與http://d.pr/i/vhKT – 2013-05-09 20:10:01

這是什麼'overflow：hidden '被設計做...並不總是合適的。 – 2013-05-09 20:13:23

css中的橫向和縱向圖像尺寸

回答

相關問題