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


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

学爾時習之、不亦悦乎? 有朋自遠方来、不亦楽乎? 人不知爾不愠、不亦君子乎?

シェアする