如何防止缩略图图像拉伸？

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（IDK的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> 

将拇指置于目录列出了一个名为Business Directory的Wordpress插件摘录页面。有一种设置可以将列表的主图像设置为我想要的任何尺寸（我设置的是300px），但是随后将相同的图像用作摘录中的缩略图并以相同的尺寸显示，这些尺寸太大为摘录页面。所以我有css限制在150x150的摘录中的拇指大小。图像在完整列表中不会失真，但在摘录缩略图中它会失真。

您可以在http://www.nextinthewest.com

看到它横跨图像更宽，以填补150像素宽度，如果它比宽高，如果它比高大宽，它squishes较窄，但不舒展它身高不够填充150像素的高度。

我也可能会使用错误的选择器，但我已经尝试了几次。

也许这个插件告诉浏览器高度和宽度都是300px，也许任何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; 
}