Как предотвратить растяжение изображения миниатюр?

Question

Я пробовал несколько способов, чтобы изображения не растягивались в этом плагине.

.wpbdmthumbs img { 
max-height: 150px; 
max-width: 150px; 
} 

.wpbdmthumbs { 
height: 150px; 
width: 150px; 
} 

и это

.wpbdmthumbs img { 
max-height:400px; 
height: exp<b></b>ression(this.width > 400 ? 400: true); 
max-width:400px; 
width: exp<b></b>ression(this.width > 400 ? 400: true); 
} 

Я также попытался это JavaScript (ИДК JS, так что может быть не так, он получил от другого форума)

<script type="text/javascript"> 
function load(path) 
{ 
temp=new Image(); 
temp.onload=function(){ 
var w=temp.width; 
var h=temp.height; 
var cnt=document.getElementById("wpbdmthumbs"); 
var fitto=(w>h)?w:h; 
var ratio=150/fitto; 
temp.width *=ratio; 
temp.height *=ratio; 
wpbdmthumbs.appendChild(temp) 
} 
temp.src=path; 
} 
</script> 

Большие пальцы помещаются в каталог, содержащий вырезку страницы с помощью плагина Wordpress, называемого бизнес-справочником. Существует параметр, который устанавливает основное изображение для списка в любой размер, который я хочу (300 пикселей - это то, что я установил), но тогда, когда одно и то же изображение используется в качестве эскиза в выдержке и отображается с тем же размером, который слишком велик для страницы выдержки. Поэтому у меня есть css, чтобы ограничить размер большого пальца в выдержке до 150x150. Изображение не искажено в полном листинге, но в большом отрезке выдержки оно искажено.

Вы можете увидеть его на http://www.nextinthewest.com

Он протянулся изображения шире, чтобы заполнить ширину 150 пикселей, если он выше, чем в ширину, и если она шире, чем высокий, он хлюпает в более узкой, но не растягивать его достаточно высок для заполнения высоты 150 пикселей.

Я также могу использовать неправильный селектор, но я попробовал несколько.

Возможно, плагин сообщает, что браузер имеет ширину и ширину 300 пикселей, и, возможно, любой css не сможет работать в этом, чтобы предотвратить растяжку.

Answer 1

В CSS, если вы хотите переместить CSS, который создается плагином, требуется очень редкое правильное использование !important. Преимущество правильного использования !important заключается в том, чтобы перекодировать javascript сгенерированный CSS, когда прямое редактирование плагина не представляется возможным.

.wpbdmthumbs img { 
height: auto !important; 
width: auto !important; 
max-height: 150px !important; 
max-width: 150px !important; 
} 

.wpbdmthumbs { 
height: 150px !important; 
width: 150px !important; 
}