我已经尝试了几种方法来防止图像在这个插件中拉伸。
.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 都无法在其中工作以防止拉伸。