Flexbox基礎-處理圖片-跟著KP用21天征服Responsive Layout-W2

2023/09/20閱讀時間約 0 分鐘

對於前端工程師而言，如何處理圖片是一個看是基本但是又重要的技能。就像是日本料理的師傅要懂得處理生魚片一樣。

因為flexbox的flex-item有自動伸縮的功能,所以要注意裡面的圖片如何被伸縮。

圖片被flexbox拉長了

這裡讓我們看個例子:

html:img作為flex-item

<d class="row">
  <p>
    "At vero eos et accusamus et iusto odio dignissimos ducimus qui blanditiis praesentium voluptatum deleniti atque corrupti quos dolores et quas molestias excepturi sint occaecati cupiditate non provident, similique sunt in culpa qui officia deserunt mollitia animi, id est laborum et dolorum fuga. Et harum quidem rerum facilis est et expedita distinctio. Nam libero tempore, cum soluta nobis est eligendi optio cumque nihil impedit quo minus id quod maxime placeat facere possimus, omnis voluptas assumenda est, omnis dolor repellendus. Temporibus autem quibusdam et aut officiis debitis aut rerum necessitatibus saepe eveniet ut et voluptates repudiandae sint et molestiae non recusandae. Itaque earum rerum hic tenetur a sapiente delectus, ut aut reiciendis voluptatibus maiores alias consequatur aut perferendis doloribus asperiores repellat."
  </p> 
    <img src="https://picsum.photos/200/200"> 
</div>

css

.row{
  display:flex;
}

結果:

結果可以看到，圖片被拉長到和文字的高度一樣，而且比例被改變了(圖片的大小是200*200的正方形)。

flex-item的高度伸縮原理

在之前的文章,我們有提到flex-item如何水平伸縮，現在我們就來看看flex-item如何垂直伸縮。

flex-container有個屬性,叫做align-items，這個屬性是在處理flex-item的垂直對齊。而其預設值為stretch ，也就是flex-item都會拉長到一樣的高度(拉到和最高的flex-item一樣高)。

回到例子,如果要讓圖片不要被拉高，有兩個方式。

1.調整align-items

將align-items設定為flex-start,flex-item就會對齊頂部，高度不會拉長到一樣高，而是維持flex-item內容的原始高度。

.row{
  display:flex;
  align-items:flex-start; /*----調整align-items-----*/
}

結果

可以看到,圖片就恢復成正常尺寸與比例了。

2.在圖片外層包div

另一個做法則是用div來包住圖片,這樣圖片就不是flex-item,也就不會被拉長了。

html

<d class="row">
  <div class="col">
  <p>
    "At vero eos et accusamus et iusto odio dignissimos ducimus qui blanditiis praesentium voluptatum deleniti atque corrupti quos dolores et quas molestias excepturi sint occaecati cupiditate non provident, similique sunt in culpa qui officia deserunt mollitia animi, id est laborum et dolorum fuga. Et harum quidem rerum facilis est et expedita distinctio. Nam libero tempore, cum soluta nobis est eligendi optio cumque nihil impedit quo minus id quod maxime placeat facere possimus, omnis voluptas assumenda est, omnis dolor repellendus. Temporibus autem quibusdam et aut officiis debitis aut rerum necessitatibus saepe eveniet ut et voluptates repudiandae sint et molestiae non recusandae. Itaque earum rerum hic tenetur a sapiente delectus, ut aut reiciendis voluptatibus maiores alias consequatur aut perferendis doloribus asperiores repellat."
  </p>
  </div>
 <div class="col"> <!--用div包裹住img--->
    <img src="https://picsum.photos/200/200">
  </div>
</div>