Flexboxに入れた画像サイズの固定・拡大縮小の設定方法

    

        
画像のサイズは常に固定
        
    
    

        
Flexboxの大きさに追従
※画像の元サイズ(= 100%)が上限
        
    
    

        
Flexboxの大きさに追従
※上限なし
        
    

.parent {
    max-width: 90%;
    margin: 0 auto;

    display: flex;
    flex-direction: row;
    flex-wrap: nowrap;
    justify-content: space-around;
}

.child {
    flex-grow: 1;

    border:1px solid #000;
    padding: 5px;
    margin: 0 5px;
}

.child p {
    text-align: center;
    line-height: 1.4rem;
    font-weight: bold;
    padding: 10px;
    border-bottom: 1px dotted #000;
}

/* 画像のサイズは常に固定 */
.child-left img {
    /* 幅・高さを具体的に指定する */
    width : calc(742px * 0.25);
    height: calc(800px * 0.25);
}

/* Flexboxの大きさに追従
   ※画像の元サイズ(= 100%)が上限 */
.child-center img {
    /* 幅もしくは高さを最大100%に設定、もう一方はauto */
    max-width: 100%;
    height: auto;
}

/* Flexboxの大きさに追従
　　※上限なし */
.child-right img {
    /* 幅もしくは高さを100%に設定、もう一方はauto */
    width: 100%; /* 親のサイズ目一杯まで広がる */
    height: auto;
}