web-dev-qa-db-ja.com

ゆがみなしに等しい幅と高さで画像を拡大縮小する方法

私は自分のフロントページに最近の投稿を検索し、それぞれのタイトルとサムネイルをつかむセクションを持っています。私のfunctions.phpでは、サムネイルのwidthとheightを次のように指定しています。

add_image_size( 'thumbnail-small', 179, 147 );

私は自分の投稿のすべての異なるサイズの画像をおすすめ画像として設定しており、それらがページ上の画像サムネイル要素に取り込まれると、それらは比例してトリミングされますが、正しいサイズに拡大縮小されません。

enter image description here

あなたが拡大縮小を見ることができるように私は画像の周りに境界線を置いた、しかしそれはWordpressがちょうどそれらがぴったり合うものにそれらを拡大縮小するように思われる。

どうすればそれらをすべて同じように見せ、それからオーバーフローを使って余分な部分を切り取ることができますか：CSSには隠されていますか？

私はこのようないくつかのCSSを試してみました：

// .image-mask is the wrapping div
#middle .image-mask { width:179px; height:147px; overflow: hidden; position:relative; }
#middle img { position:absolute; display: block; top:0; left:0; }

そして...

#middle img{ width: auto; max-width: 150px; height: auto; max-height: 100px; }
phpcsspost-thumbnailsimage-sizeadd-image-size
1
Romes

WordPressで画像をそれらの絶対画像サイズにハードクロップする場合は、 $crop のadd_image_size引数をtrueに設定できます。デフォルトではfalseです。 ：

add_image_size( 'thumbnail-small', 179, 147, true );
5
Milo