1

このプラグインで画像が伸びないようにする方法をいくつか試しました。

.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>

親指は、ビジネス ディレクトリと呼ばれる Wordpress プラグインによって、ディレクトリ リストの抜粋ページに配置されます。リストのメイン画像を任意のサイズに設定する設定があります (300px を設定しました) が、同じ画像が抜粋のサムネイルとして使用され、同じサイズで表示されるため、大きすぎます。抜粋ページ用。したがって、抜粋のサム サイズを 150x150 に制限する CSS があります。完全なリストでは画像は歪んでいませんが、抜粋のサムでは歪んでいます。

http://www.nextinthewest.comで見ることができます。

画像の高さが幅よりも大きい場合は、150 ピクセルの幅に合わせて画像を拡大します。幅が高さよりも広い場合は、幅を狭くしますが、高さ 150 ピクセルを埋めるのに十分な高さに引き伸ばすことはありません。

間違ったセレクターを使用している可能性もありますが、いくつか試しました。

プラグインがブラウザに高さと幅が 300 ピクセルであることを伝えている可能性があります。

4

1 に答える 1

3

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;
}
于 2013-08-17T15:37:51.707 に答える