显示：flex&图像尺寸/定心 [英] display:flex & image sizing/centering

问题描述

我使用 display：flex; 将图片置中， max-width / max-height 来调整大小。有几个这些图像 - 一些宽，一些高，一些正方形 - 我想确保他们都有一个体面的足够的大小来查看他们。

我假设，例如，如果图像达到最大宽度而不是高度，则应保持与宽度成比例。

这是我遇到的问题。在Chrome中，它看起来完美的所有图像。在Firefox和Edge中，它们不成比例。

.image_block {padding：20px; height：140px;背景：#eee; display：flex;}。image_block img {margin：auto; max-width：170px; max-height：90px;}

 < div class = image_block> < img src =http://www.paulruocco.com/jobjacket/assets/uploads/company_uploads/image_070816132332577fe19495484.png/>< / div>  

我不在乎我最后得到的结果（我可以使用），但我想所有三个一致。

解决方案

这似乎 flexbox do不要在目前的浏览器中正确缩放图片（具有固有的宽高比），至少！
（有关详情，您可以查看此讨论）

因此我有两个解决方案：

1. 为 img
设置 flex-basis





  .image_block {padding：20px; height：140px;背景：#eee; display：flex;}。image_block img {margin：auto; max-width：170px; max-height：90px; flex-basis：170px;}  

 < div class = image_block> < img src =http://www.paulruocco.com/jobjacket/assets/uploads/company_uploads/image_070816132332577fe19495484.png/>< / div>  



2. 包装 img 与 div 标签。



  .image_block {padding：20px; height：140px;背景：#eee; display：flex;}。image_block div {margin：auto;} image_block div img {max-width：170px; max-height：90px;}  

 < div class = image_block> < div>< img src =http://www.paulruocco.com/jobjacket/assets/uploads/company_uploads/image_070816132332577fe19495484.png/>< / div>< / div>  
 





此外，我建议您使用 flexbox c： c：





  .image_block {padding：20px; height：140px;背景：#eee;显示：flex; justify-content：center; align-items：center;}。image_block img {max-width：170px; max-height：90px; flex-basis：170px;}  

 < div class = image_block> < img src =http://www.paulruocco.com/jobjacket/assets/uploads/company_uploads/image_070816132332577fe19495484.png/>< / div>  





让我们知道您对此的反馈。谢谢！




I am using display: flex; to center an image and max-width / max-height to size it. There are several of these images - some wide, some tall, some square - and I want to be sure they are all a decent enough size to view them.

I assumed that if, for example, the image hits the maximum width and not the height, it should stay in proportion to the width.

Here is the issue I'm having. In chrome, it looks perfect for all images. In Firefox and Edge, they are skewed out of proportion.

.image_block {
  padding: 20px;
  height: 140px;
  background: #eee;
  display: flex;
}
.image_block img {
  margin: auto;
  max-width: 170px;
  max-height: 90px;
}

<div class="image_block">
  <img src="http://www.paulruocco.com/jobjacket/assets/uploads/company_uploads/image_070816132332577fe19495484.png" />
</div>

I don't care which result I end up with (I can work with either) but I would like all three of them consistent. What can I do to accomplish this?

解决方案

It seems flexbox do not scale down images (that have an intrinsic aspect ratio) correctly in browsers at the moment, at least! (For more info, you can look at this discussion)

So I have two solutions for this:

1. Set flex-basis for the img

.image_block {
  padding: 20px;
  height: 140px;
  background: #eee;
  display: flex;
}
.image_block img {
  margin: auto;
  max-width: 170px;
  max-height: 90px;
  flex-basis: 170px;
}

<div class="image_block">
  <img src="http://www.paulruocco.com/jobjacket/assets/uploads/company_uploads/image_070816132332577fe19495484.png" />
</div>

2. Wrap the img with a div tag.

.image_block {
  padding: 20px;
  height: 140px;
  background: #eee;
  display: flex;
}
.image_block div {
  margin: auto;
}
.image_block div img {
  max-width: 170px;
  max-height: 90px;
}

<div class="image_block">
  <div><img src="http://www.paulruocco.com/jobjacket/assets/uploads/company_uploads/image_070816132332577fe19495484.png" /></div>
</div>

Also I would suggest you use flexbox techniques instead of using margin: auto:

.image_block {
  padding: 20px;
  height: 140px;
  background: #eee;
  display: flex;
  justify-content: center;
  align-items: center;
}
.image_block img {
  max-width: 170px;
  max-height: 90px;
  flex-basis: 170px;
}

<div class="image_block">
  <img src="http://www.paulruocco.com/jobjacket/assets/uploads/company_uploads/image_070816132332577fe19495484.png" />
</div>

Let me know your feedback on this. Thanks!

这篇关于显示：flex&图像尺寸/定心的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！