logo标签列表

flexbox内的img的最大宽度不保持纵横比

cssflexbox
14

我想使用flex将img垂直居中在div中，但在每个浏览器中的效果都不同。

.flex-container {
  display: -webkit-box;
  display: -moz-box;
  display: -ms-flexbox;
  display: -webkit-flex;
  display: flex;
  -webkit-flex-flow: row wrap;
  -ms-flex-flow: row wrap;
  flex-flow: row wrap;
  justify-content: flex-start;
}
.flex-item {
  height: 222px;
  width: 200px;
  border: 1px solid lightgray;
  padding: 5px;
  margin: 5px;
}
.flex-item img {
  max-width: 100%;
  max-height: 100%;
  align-self: center;
  -webkit-align-self: center;
  margin: auto;
}
.item-image {
  border: 1px solid lightgray;
  display: -webkit-box;
  display: -moz-box;
  display: -ms-flexbox;
  display: -webkit-flex;
  display: flex;
  width: 190px;
  height: 120px;
}
<div class="flex-container">
  <div class="flex-item">
    <div class="item-image">
      <img src="https://c1.staticflickr.com/9/8264/8700922582_d7b50280b4_z.jpg">
    </div>
  </div>
</div>

https://jsfiddle.net/e0m2d6hx/

在Chrome中效果很好，但在IE和FF中似乎不能使用max-width。

有人能帮我解决这个问题吗？我知道不用flex也可以使img居中，但我想要理解其中的原理。

有趣的问题。FF似乎认为任何在 flex box 中的内容都应该是可伸缩的。即使您删除align-self属性，更大的图像仍会表现出这种行为。不确定是否有解决方法。 - Mr Lister
2个回答
26

如何修复IE和Firefox的问题

按照以下更改应该会在Chrome、Firefox和IE上产生相同的结果：

  • 将.flex-item img添加flex: 0 0 auto;。这将修复IE。
  • 将.flex-item img添加object-fit: scale-down;。这将修复Firefox。

.flex-container {
  display: -webkit-box;
  display: -moz-box;
  display: -ms-flexbox;
  display: -webkit-flex;
  display: flex;
  -webkit-flex-flow: row wrap;
  -ms-flex-flow: row wrap;
  flex-flow: row wrap;
  justify-content: flex-start;
}
.flex-item {
  height: 222px;
  width: 200px;
  border: 1px solid lightgray;
  padding: 5px;
  margin: 5px;
}
.flex-item img {
  flex: 0 0 auto;
  max-width: 100%;
  max-height: 100%;
  align-self: center;
  -webkit-align-self: center;
  margin: auto;
  object-fit: scale-down;
}
.item-image {
  border: 1px solid lightgray;
  display: -webkit-box;
  display: -moz-box;
  display: -ms-flexbox;
  display: -webkit-flex;
  display: flex;
  width: 190px;
  height: 120px;
}
<div class="flex-container">
  <div class="flex-item">
    <div class="item-image">
      <img src="http://www.joshuacasper.com/contents/uploads/joshua-casper-samples-free.jpg">
    </div>
  </div>
  <div class="flex-item">
    <div class="item-image">
      <img src="https://c1.staticflickr.com/9/8264/8700922582_d7b50280b4_z.jpg">
    </div>
  </div>
  <div class="flex-item">
    <div class="item-image">
      <img src="http://www.pinaldave.com/bimg/ilovesamples.jpg">
    </div>
  </div>
  <div class="flex-item">
    <div class="item-image">
      <img src="http://appslova.com/wp-content/uploads/2014/11/Android-.png">
    </div>
  </div>
</div>

JS Fiddle: https://jsfiddle.net/7yyf3nob/

这是为什么呢？

很遗憾我无法解释为什么不同浏览器之间的结果会有如此大的差异，除了在使用flexbox模型时，似乎img元素的自然调整属性在IE和Firefox中会丢失。由于flexbox仍然是一个相对较新的模型，而各个厂商还在不断完善其实现。

0

使用max-width:百分比时，flex项目中的图像大小调整不正确

W3C CSS Flexbox示例的修改版本：

<!DOCTYPE html>
<html>
 <head>
  <title>
   W3C FLEX EXAMPLE MODIFIED TO ADD FLEX TOOLBAR
   https://www.w3schools.com/css/css3_flexbox.asp
  </title>
  <style>
   body{
    font-size: 3vh;
   }
   .flexToolbar {
     background-color: DodgerBlue;
     display: flex;
     flex-basis: 64%;
     flex-wrap: nowrap;
     font-size: 1.5vh;
     font-weight: bolder;
   }
   .flexToolbar > div {
    /* https://dev59.com/2WQn5IYBdhLWcg3wETrj */
    align-self: flex-end;
    background-color: transparent;
    width: 100px;
    margin-left: 2vw;
    /* Your flex items are set to "min-width: auto", which gives them a min-width equal to their intrinsic width. 
       If you style your .container divs with "min-width: 0" you get the behavior I think you expect. 
       https://bugzilla.mozilla.org/show_bug.cgi?id=1109992
    */
    min-width: 0;
    text-align: center;
   }
   .flexToolbarImage {
    height: auto;
    max-width: 64%;
   }
  </style>
 </head>
 <body>
 <h1>Flexible Boxes</h1>
  <div class="flexToolbar">
   <div>
    <img id="dbImport" class="flexToolbarImage" src="db.import.png" alt="IMPORT DB" />
    IMPORT
   </div>
   <div>
    <img class="flexToolbarImage" src="vertical.line.png" alt="|" />
   </div>
   <div>
    <img id="dbNew" class="flexToolbarImage" src="db.new.png" alt="NEW DB" />
    NEW
   </div>
   <div>
    <img class="flexToolbarImage" src="vertical.line.png" alt="|" />
   </div>
   <div>
    <img id="dbCreate" class="flexToolbarImage" src="db.create.png" alt="CREATE TABLE" />
    CREATE
   </div>
   <div>
    <img id="dbDrop" class="flexToolbarImage" src="db.drop.png" alt="DROP TABLE" />
    DROP
   </div>
   <div>
    <img class="flexToolbarImage" src="vertical.line.png" alt="|" />
   </div>
   <div>
    <img id="dbInsert" class="flexToolbarImage" src="db.insert.png" alt="INSERT ROWs" />
    INSERT
   </div>
   <div>
    <img id="dbUpdate" class="flexToolbarImage" src="db.update.png" alt="UPDATE ROWs" />
    UPDATE
   </div>
   <div>
    <img id="dbDelete" class="flexToolbarImage" src="db.delete.png" alt="DELETE ROWs" />
    DELETE
   </div>
   <div>
    <img id="dbSelect" class="flexToolbarImage" src="db.select.png" alt="SELECT ROWs" />
    SELECT
   </div>
   <div>
    <img class="flexToolbarImage" src="vertical.line.png" alt="|" />
   </div>
   <div>
    <img id="dbSQL" class="flexToolbarImage" src="db.sql.png" alt="WRITE SQL"/>
    SQL
   </div>
   <div>
    <img class="flexToolbarImage" src="vertical.line.png" alt="|" />
   </div>
   <div>
    <img id="dbExport" class="flexToolbarImage" src="db.export.png" alt="EXPORT DB" />
    EXPORT
   </div>
   <div>
    <img class="flexToolbarImage" src="vertical.line.png" alt="|" />
   </div>
   <div>
    <img id="dbRun" class="flexToolbarImage" src="db.run.png" alt="RUN SQL" />
    RUN
   </div>
  </div>
  <p>Try to resize the browser window.</p>
  <p>A container with "flex-wrap: nowrap;" will never wrap its items.</p>
  <p><strong>Note:</strong> Flexbox is not supported in Internet Explorer 10 or earlier versions.</p>
 </body>
</html>

网页内容由stack overflow 提供, 点击上面的
可以查看英文原文，
原文链接