如何防止缩略图拉伸？

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 像素的宽度，如果图像的宽度大于高度，它会压缩得更窄，但不会将其拉伸得足够高以填充 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;
}