ワードプレスで画像をDIVの中心部に全体をカバーするように配置する方法について解説いたします。
ワードプレスで画像をDIVの中心部に全体をカバーするように配置するスタイルシート
下記のような構造の画像表示があるとします。
<div class="coveringdiv"> <img src = "myimage.jpg"> </div>
このDIVのサイズを正方形に固定し、その内部の画像のサイズが横長であっても、中央部に配置し、縦にぴったり収めて(横は切り取られます)DIVの全体をカバーするようにするスタイルシートは下記のようになります。
<style>
.coveringdiv {
width:300px;
height:auto;
aspect-ratio: 1 / 1 ;
overflow: hidden;
}
.coveringdiv img {
height: 100%;
max-width: 100%;
object-fit: cover;
}
</style>
まず画像を包んでいるDIV要素coveringdivが、幅３００PXで、縦横比１対１ aspect-ratio: 1 / 1 ; になるようにします。
またoverflow: hidden;でそのDIVをはみ出た分は表示しないようにします。
次にその中にあるimg要素が、高さ１００％ height: 100%;、横幅は縦横比を維持してそのDIV全体を画像が覆う事をobject-fit: cover; で指定します。
ただしこのままではブラウザーによっては中央に寄りません。max-width: 100%;を指定することで中央に寄せることが出来ます。
下図は上記のスタイルを適応した、画像です。
DIV枠内で最大の高さまで拡大させたうえで、中央に寄っており、またはみ出した分は見えなくなっていることが分かります。
ご参考になりましたら幸いです
