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像素宽度;如果宽度大于高度，则会更窄，但不会拉伸到足以填充150px高度的高度。

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

也许这个插件告诉浏览器是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;
}

如何防止缩略图拉伸？

1 个答案: