画像の縦横比を維持したままサイズを指定して真ん中に表示する


.img container {
    display: table-cell;
    text-align: center;
    vertical-align: middle;
    width: 250px;
    height: 250px;
    
}

.img {
    display: inline-block;
    background-color: #ccc;
    background-position: center center;
    background-repeat: no-repeat;
    width:auto;
    height:auto;
    max-width: 250px;
    max-height: 250px;
    background-size: cover;
}

信雅

Master of TERNS. Focus on WordPress/PHP/Cloud Computing/Space Science Pronunciation of my name: Xin4Ya3(Chinese), Hsin4Ya3(Another Chinese), しんや(Japanese), Shinya(English).

シェアする

コメントを残す

コメントする

CAPTCHAis initialing...