フレックスボックスは最大幅と最大高さの内容を持っていますが、依然として反応します

Question

フレックスボックスには4列あり、最初のイメージにはイメージがあります。

JSFiddle

画像が（これは動作します）応答ではありませんが、画面が大きくなったら、私はそれが好きだろうと、それはもはやピクセル単位での最大幅を持つように、拡大/縮小していますので、私は、それをしたいですパーセンテージの代わりに。

max-width: 100%;を使用して応答性を高めましたが、一度画面が大きく縮小されていない場合は、max-width: 250px;を追加したいので、拡大しないようにしてください。

100%を取り除いて250pxに変更すると、画面が小さくなっても反応しなくなります。

私は画像のために働きたいので、私はメディアクエリをしたくありません。

どうすればよいですか？

HTML

<div class="container"> 
    <div class="row"> 
    <div class="col"> 
     <img src="https://s-media-cache-ak0.pinimg.com/236x/9d/db/c7/9ddbc7c118bcd047a06b44bae34bb413--exotic-flowers-tropical-flowers.jpg" /> 
    </div> 
    <div class="col"> 
     This is a group of flex columns 
    </div> 
    <div class="col"> 
     Isn't that interesting? 
    </div> 
    </div> 
</div> 

CSS

.container { 
    display: block; 
    background-color: #fff; 
    padding-left: 30px; 
    padding-right: 30px; 
} 

.row { 
    display: -webkit-box; 
    display: -ms-flexbox; 
    display: flex; 
    -webkit-box-pack: center; 
     -ms-flex-pack: center; 
      justify-content: center; 
    -webkit-box-orient: horizontal; 
    -webkit-box-direction: normal; 
     -ms-flex-flow: row nowrap; 
      flex-flow: row nowrap; 
    margin-left: -30px; 
    margin-right: -30px; 
    padding: 15px 0 60px; 
} 

.col { 
    border: 1px solid black; 
    padding-left:30px; 
    padding-right:30px; 
    min-width: 0; 
} 

.col img { 
    width: auto; 
    max-width:100%; 
    // max-width: 250px; // This breaks it, but is what I need 
    max-height: 250px; 
} 

Answer 1

一つの解決策は、あなたの最初の.col

Fiddle demo

に max-width: 250pxを設定することです

スタックは

は

---

別のオプションは、spanでimgをラップして提供することです

.container { 
 
    display: block; 
 
    background-color: #fff; 
 
    padding-left: 30px; 
 
    padding-right: 30px; 
 
} 
 

 
.row { 
 
    display: -webkit-box; 
 
    display: -ms-flexbox; 
 
    display: flex; 
 
    -webkit-box-pack: center; 
 
     -ms-flex-pack: center; 
 
      justify-content: center; 
 
    -webkit-box-orient: horizontal; 
 
    -webkit-box-direction: normal; 
 
     -ms-flex-flow: row nowrap; 
 
      flex-flow: row nowrap; 
 
    margin-left: -30px; 
 
    margin-right: -30px; 
 
    padding: 15px 0 60px; 
 
} 
 

 
.col { 
 
    border: 1px solid black; 
 
    padding-left:30px; 
 
    padding-right:30px; 
 
    min-width: 0; 
 
} 
 

 
.col img { 
 
    max-width: 100%; 
 
    max-height: 250px; 
 
} 
 

 
.col:first-child { 
 
    max-width: 250px; 
 
}

<div class="container"> 
 
    <div class="row"> 
 
    <div class="col"> 
 
     <img src="https://s-media-cache-ak0.pinimg.com/236x/9d/db/c7/9ddbc7c118bcd047a06b44bae34bb413--exotic-flowers-tropical-flowers.jpg" /> 
 
    </div> 
 
    <div class="col"> 
 
     This is a group of flex columns 
 
    </div> 
 
    <div class="col"> 
 
     Isn't that interesting? 
 
    </div> 
 
    </div> 
 
</div>

スニペット span max-width: 250px

Fiddle demo

スタックは、スニペット

.container { 
 
    display: block; 
 
    background-color: #fff; 
 
    padding-left: 30px; 
 
    padding-right: 30px; 
 
} 
 
.row { 
 
    display: -webkit-box; 
 
    display: -ms-flexbox; 
 
    display: flex; 
 
    -webkit-box-pack: center; 
 
     -ms-flex-pack: center; 
 
      justify-content: center; 
 
    -webkit-box-orient: horizontal; 
 
    -webkit-box-direction: normal; 
 
     -ms-flex-flow: row nowrap; 
 
      flex-flow: row nowrap; 
 
    margin-left: -30px; 
 
    margin-right: -30px; 
 
    padding: 15px 0 60px; 
 
} 
 
.col { 
 
    border: 1px solid black; 
 
    padding-left:30px; 
 
    padding-right:30px; 
 
    min-width: 0; 
 
} 
 
.col img { 
 
    max-width: 100%; 
 
    max-height: 250px; 
 
} 
 
.col span { 
 
    max-width: 250px; 
 
}

<div class="container"> 
 
    <div class="row"> 
 
    <div class="col"> 
 
     <span> 
 
     <img src="https://s-media-cache-ak0.pinimg.com/236x/9d/db/c7/9ddbc7c118bcd047a06b44bae34bb413--exotic-flowers-tropical-flowers.jpg" /> 
 
     </span> 
 
    </div> 
 
    <div class="col"> 
 
     This is a group of flex columns 
 
    </div> 
 
    <div class="col"> 
 
     Isn't that interesting? 
 
    </div> 
 
    </div> 
 
</div>