各画像の高さまたは幅をトリミングして中央に配置

すべての画像を特定の高さと幅、または特定の高さと流動的な幅に設定し、画像をトリミングして中央に配置します。 以下の2つの方法をご覧ください：

1) 各画像に、流動的な幅で静的な高さを設定する：

カスタムCSS：

これをお好みのカスタムCSSの場所またはスタイルシートに追加してください。デフォルトの追加CSSの場所は以下のとおりです。 WordPressダッシュボード > 外観 > カスタマイズ > スタイルシート 追加CSS.

#cff .cff-photo, #cff .cff-html5-video, #cff .cff-event-thumb{ 
    height: 200px;
    width: 100%;
}
.cff-multiple{ overflow: hidden; }

200px」は各画像の高さを指定します。

カスタムJavascript：

このJavaScriptをサイトに追加してください。これはカスタムJavaScriptプラグインを使用して手動で行うことができます。詳しくは こちら.

$('.cff-photo, .cff-html5-video, .cff-event-thumb').each(function(){
  $(this).find('img, video').hide();
  $(this).css({
    'background' : 'url(' + $(this).find('img').attr('src') + ') no-repeat center center',
    'background-size' : 'cover'
  });
});

2) 各画像と動画に固定した高さと幅を設定する：

CSSだ：

@media all and (min-width: 535px){ 
  #cff .cff-photo,
  #cff.cff-half-layout .cff-photo,
  #cff.cff-thumb-layout .cff-photo,
  #cff .cff-html5-video,
  #cff.cff-half-layout .cff-html5-video,
  #cff.cff-thumb-layout .cff-html5-video {
    position: relative !important;
    width: 50% !important;
    height: 300px !important;
    overflow: hidden !important;
  }
  #cff .cff-photo img,
  #cff.cff-half-layout .cff-photo img,
  #cff.cff-thumb-layout .cff-photo img,
  #cff .cff-html5-video video,
  #cff.cff-half-layout .cff-html5-video video,
  #cff.cff-thumb-layout .cff-html5-video video {
    position: absolute !important;
    left: 50% !important;
    top: 50% !important;
    height: 100%;
    width: auto;
    max-width: none;
    -webkit-transform: translate(-50%,-50%);
    -ms-transform: translate(-50%,-50%);
    transform: translate(-50%,-50%);
  }

  #cff .cff-photo img.portrait, 
  #cff.cff-half-layout .cff-photo img.portrait,
  #cff.cff-thumb-layout .cff-photo img.portrait, 
  #cff .cff-html5-video video.portrait, 
  #cff.cff-half-layout .cff-html5-video video.portrait, 
  #cff.cff-thumb-layout .cff-html5-video video.portrait { 
    position: absolute !important; 
    left: 50% !important;
    top: 50% !important; 
    height: auto; 
    width: 100%; 
    max-width: none; 
    -webkit-transform: translate(-50%,-50%); 
    -ms-transform: translate(-50%,-50%); 
    transform: translate(-50%,-50%); 
  }

  #cff.cff-half-layout .cff-text-wrapper { 
  width: 49%;
  }
}

ジャバスクリプト

$('#cff .cff-photo img').each(function(){
    var $self = $(this);
    if ($self.width() < $self.height()) {
        $self.addClass('portrait');
    }
});
$('#cff video').each(function(){
    var $self = $(this);
    if ($self.width() < $self.height()) {
        $self.addClass('portrait');
    }
});

青い数字は、このコードが有効になるためのデバイスの最小幅である。

赤い数字は各画像の幅と高さ。

黄色の数字は、投稿に関連付けられたテキスト要素の幅です。

ドキュメントに答えが見つからない？

サポート