blocks|key|131568|text|对于img标签，如果您定义了一侧，则另一侧的大小将被调整以保持纵横比，并且在默认情况下，图像将扩展为其原始大小。|type|unstyled|depth|inlineStyleRanges|entityRanges|data|131569|利用这一事实，如果你将每个img标签包装到div标签中，并将其宽度设置为父div的100%25，那么高度将根据你想要的纵横比。|131570|http://jsfiddle.net/0o5tpbxg/|offset|length|131571|*+{
++++margin:+0;
++++padding:+0;
}
.slider+{
++++display:+flex;
}
.slider+.slide+img+{
++++width:+100%25;
}|code-block|syntax|javascript|131572|entityMap|0|LINK|mutability|MUTABLE|url^0|0|0|0|T|0|0|0^^$0|@$1|2|3|4|5|6|7|T|8|@]|9|@]|A|$]]|$1|B|3|C|5|6|7|U|8|@]|9|@]|A|$]]|$1|D|3|E|5|6|7|V|8|@]|9|@$F|W|G|X|1|Y]]|A|$]]|$1|H|3|I|5|J|7|Z|8|@]|9|@]|A|$K|L]]|$1|M|3|-4|5|6|7|10|8|@]|9|@]|A|$]]]|N|$O|$5|P|Q|R|A|$S|E]]]]

<p>For img tags if you define one side then other side is resized to keep aspect ratio and by default images expand to their original size.</p>

<p>Using this fact if you wrap each img tag into div tag and set its width to 100% of parent div then height will be according to aspect ratio as you wanted.</p>

<p><a href="http://jsfiddle.net/0o5tpbxg/" rel="noreferrer">http://jsfiddle.net/0o5tpbxg/</a></p>

<pre><code>* {
    margin: 0;
    padding: 0;
}
.slider {
    display: flex;
}
.slider .slide img {
    width: 100%;
}
</code></pre>


blocks|key|134478|text|为了防止图像在flex父对象中的任一轴上拉伸，我找到了几个解决方案。|type|unstyled|depth|inlineStyleRanges|entityRanges|data|134479|您可以尝试在图像上使用对象拟合，例如|134480|object-fit:+contain;|code-block|syntax|javascript|134481|http://jsfiddle.net/ykw3sfjd/|offset|length|134482|或者您可以添加特定于flex的规则，这在某些情况下可能工作得更好。|134483|align-self:+center;
flex:+0+0+auto;|134484|entityMap|0|LINK|mutability|MUTABLE|url^0|0|0|0|0|T|0|0|0|0^^$0|@$1|2|3|4|5|6|7|X|8|@]|9|@]|A|$]]|$1|B|3|C|5|6|7|Y|8|@]|9|@]|A|$]]|$1|D|3|E|5|F|7|Z|8|@]|9|@]|A|$G|H]]|$1|I|3|J|5|6|7|10|8|@]|9|@$K|11|L|12|1|13]]|A|$]]|$1|M|3|N|5|6|7|14|8|@]|9|@]|A|$]]|$1|O|3|P|5|F|7|15|8|@]|9|@]|A|$G|H]]|$1|Q|3|-4|5|6|7|16|8|@]|9|@]|A|$]]]|R|$S|$5|T|U|V|A|$W|J]]]]

<p>To keep images from stretching in either axis inside a flex parent I have found a couple of solutions. </p>

<p>You can try using object-fit on the image which, e.g.</p>

<pre><code>object-fit: contain;
</code></pre>

<p><a href="http://jsfiddle.net/ykw3sfjd/">http://jsfiddle.net/ykw3sfjd/</a></p>

<p>Or you can add flex-specfic rules which may work better in some cases.</p>

<pre><code>align-self: center;
flex: 0 0 auto;
</code></pre>


blocks|key|131619|text|不需要添加包含div。|type|unstyled|depth|inlineStyleRanges|entityRanges|data|131620|css+"align-items“属性的默认值是"stretch”，这是导致图像被拉伸到其全部原始高度的原因。将css+"align-items“属性设置为"flex-start”可以修复您的问题。|131621|.slider+{
++++display:+flex;
++++align-items:+flex-start;++/*+ADD+THIS!+*/
}|code-block|syntax|javascript|131622|entityMap^0|0|0|0^^$0|@$1|2|3|4|5|6|7|K|8|@]|9|@]|A|$]]|$1|B|3|C|5|6|7|L|8|@]|9|@]|A|$]]|$1|D|3|E|5|F|7|M|8|@]|9|@]|A|$G|H]]|$1|I|3|-4|5|6|7|N|8|@]|9|@]|A|$]]]|J|$]]

<p>No need to add a containing div.</p>

<p>The default for the css "align-items" property is "stretch" which is what is causing your images to be stretched to its full original height.  Setting the css "align-items" property to "flex-start" fixes your issue.</p>

<pre><code>.slider {
    display: flex;
    align-items: flex-start;  /* ADD THIS! */
}
</code></pre>


blocks|key|132465|text|type|unstyled|depth|inlineStyleRanges|entityRanges|data|132466|大多数图像具有固有尺寸，即自然大小，就像jpeg图像一样。如果指定的大小定义了宽度和高度中的一个，则使用内部比率来确定缺少的值。-参见MDN。|blockquote|offset|length|style|CODE|132467|132468|132469|但据我所知，如果设置为直接伸缩项目的图像与当前的Flexible+Box+Layout+Module+Level+1不同，这就不会像预期的那样工作。|132470|查看这些讨论和错误报告可能是相关的：|132471|correctly.|132472|Firefox+Bug+972595容器应该使用"+Flex+-basis“而不是"width”来计算flex项的固有宽度|unordered-list-item|132473|
|132474|Chromium+Issue+249112+-在|132475|Flexbugs+#14中，允许固有的纵横比通知主尺寸的calculation.|132476|132477|132478|132479|作为一种变通办法，您可以用一个<div>或一个<span>来包装每个<img>。|132480|132481|​|132482|.slider+{
++display:+flex;
}

.slider>div+{
++min-width:+0;+/*+why?+see+below.+*/
}

.slider>div>img+{
++max-width:+100%25;
++height:+auto;
}|code-block|syntax|javascript|132483|<div+class="slider">
++<div><img+src="https://picsum.photos/400/300?image=0"+/></div>
++<div><img+src="https://picsum.photos/400/300?image=1"+/></div>
++<div><img+src="https://picsum.photos/400/300?image=2"+/></div>
++<div><img+src="https://picsum.photos/400/300?image=3"+/></div>
</div>|132484|132485|132486|+|132487|132488|为了为flex+items提供更合理的默认最小大小，本规范引入了一个新的auto值作为CSS2.1中定义的min-width和min-height属性的初始值。|132489|132490|132491|或者，你可以使用CSS+table布局，你会得到与flexbox相似的结果，它可以在更多的浏览器上工作，甚至在IE8上也可以。|132492|132493|132494|.slider+{
++display:+table;
++width:+100%25;
++table-layout:+fixed;
++border-collapse:+collapse;
}

.slider>div+{
++display:+table-cell;
++vertical-align:+top;
}

.slider>div>img+{
++max-width:+100%25;
++height:+auto;
}|132495|<div+class="slider">
++<div><img+src="https://picsum.photos/400/300?image=0"+/></div>
++<div><img+src="https://picsum.photos/400/300?image=1"+/></div>
++<div><img+src="https://picsum.photos/400/300?image=2"+/></div>
++<div><img+src="https://picsum.photos/400/300?image=3"+/></div>
</div>|132496|132497|entityMap|0|LINK|mutability|MUTABLE|url|https://developer.mozilla.org/en-US/docs/Web/CSS/image|1|http://www.w3.org/TR/css-flexbox-1/|2|https://bugzilla.mozilla.org/show_bug.cgi?id=972595|3|https://code.google.com/p/chromium/issues/detail?id=249112|4|https://github.com/philipwalton/flexbugs/issues/14|5|http://www.w3.org/TR/css-flexbox-1/#flex-item|6|http://www.w3.org/TR/css-flexbox-1/#valdef-min-width-min-height-auto|7|http://www.w3.org/TR/CSS21/visudet.html#propdef-min-width|8|http://www.w3.org/TR/CSS21/visudet.html#propdef-min-height^0|0|K|4|1V|3|0|0|0|0|O|Y|1|0|0|0|0|I|2|0|0|0|L|3|0|0|C|4|0|0|0|0|F|5|N|6|Y|5|0|0|0|0|0|0|0|0|0|3|A|5|10|4|6|1H|9|7|1R|A|8|0|0|0|C|5|P|7|0|0|0|0|0|0^^$0|@$1|2|3|-4|4|5|6|2J|7|@]|8|@]|9|$]]|$1|A|3|B|4|C|6|2K|7|@$D|2L|E|2M|F|G]]|8|@$D|2N|E|2O|1|2P]]|9|$]]|$1|H|3|-4|4|5|6|2Q|7|@]|8|@]|9|$]]|$1|I|3|-4|4|5|6|2R|7|@]|8|@]|9|$]]|$1|J|3|K|4|5|6|2S|7|@]|8|@$D|2T|E|2U|1|2V]]|9|$]]|$1|L|3|M|4|5|6|2W|7|@]|8|@]|9|$]]|$1|N|3|O|4|5|6|2X|7|@]|8|@]|9|$]]|$1|P|3|Q|4|R|6|2Y|7|@]|8|@$D|2Z|E|30|1|31]]|9|$]]|$1|S|3|T|4|5|6|32|7|@]|8|@]|9|$]]|$1|U|3|V|4|R|6|33|7|@]|8|@$D|34|E|35|1|36]]|9|$]]|$1|W|3|X|4|R|6|37|7|@]|8|@$D|38|E|39|1|3A]]|9|$]]|$1|Y|3|-4|4|5|6|3B|7|@]|8|@]|9|$]]|$1|Z|3|-4|4|5|6|3C|7|@]|8|@]|9|$]]|$1|10|3|-4|4|5|6|3D|7|@]|8|@]|9|$]]|$1|11|3|12|4|5|6|3E|7|@$D|3F|E|3G|F|G]|$D|3H|E|3I|F|G]|$D|3J|E|3K|F|G]]|8|@]|9|$]]|$1|13|3|-4|4|5|6|3L|7|@]|8|@]|9|$]]|$1|14|3|15|4|5|6|3M|7|@]|8|@]|9|$]]|$1|16|3|17|4|18|6|3N|7|@]|8|@]|9|$19|1A]]|$1|1B|3|1C|4|18|6|3O|7|@]|8|@]|9|$19|1A]]|$1|1D|3|15|4|5|6|3P|7|@]|8|@]|9|$]]|$1|1E|3|-4|4|5|6|3Q|7|@]|8|@]|9|$]]|$1|1F|3|1G|4|C|6|3R|7|@]|8|@]|9|$]]|$1|1H|3|-4|4|5|6|3S|7|@]|8|@]|9|$]]|$1|1I|3|1J|4|5|6|3T|7|@]|8|@$D|3U|E|3V|1|3W]|$D|3X|E|3Y|1|3Z]|$D|40|E|41|1|42]|$D|43|E|44|1|45]]|9|$]]|$1|1K|3|-4|4|5|6|46|7|@]|8|@]|9|$]]|$1|1L|3|-4|4|5|6|47|7|@]|8|@]|9|$]]|$1|1M|3|1N|4|5|6|48|7|@$D|49|E|4A|F|G]|$D|4B|E|4C|F|G]]|8|@]|9|$]]|$1|1O|3|-4|4|5|6|4D|7|@]|8|@]|9|$]]|$1|1P|3|15|4|5|6|4E|7|@]|8|@]|9|$]]|$1|1Q|3|1R|4|18|6|4F|7|@]|8|@]|9|$19|1A]]|$1|1S|3|1T|4|18|6|4G|7|@]|8|@]|9|$19|1A]]|$1|1U|3|15|4|5|6|4H|7|@]|8|@]|9|$]]|$1|1V|3|-4|4|5|6|4I|7|@]|8|@]|9|$]]]|1W|$1X|$4|1Y|1Z|20|9|$21|22]]|23|$4|1Y|1Z|20|9|$21|24]]|25|$4|1Y|1Z|20|9|$21|26]]|27|$4|1Y|1Z|20|9|$21|28]]|29|$4|1Y|1Z|20|9|$21|2A]]|2B|$4|1Y|1Z|20|9|$21|2C]]|2D|$4|1Y|1Z|20|9|$21|2E]]|2F|$4|1Y|1Z|20|9|$21|2G]]|2H|$4|1Y|1Z|20|9|$21|2I]]]]

<blockquote>
  <p>Most of images with <em>intrinsic dimensions</em>, that is a natural size, like a <code>jpeg</code> image. If the specified size defines one of both the width and the height, the missing value is determined using the intrinsic ratio... - see <a href="https://developer.mozilla.org/en-US/docs/Web/CSS/image" rel="noreferrer">MDN</a>.</p>
</blockquote>

<p>But that doesn't work as expected if the images that are being set as direct flex items with the current <a href="http://www.w3.org/TR/css-flexbox-1/" rel="noreferrer">Flexible Box Layout Module Level 1</a>, as far as I know.</p>

<p>See these discussions and bug reports might be related:</p>

<ul>
<li><a href="https://github.com/philipwalton/flexbugs/issues/14" rel="noreferrer">Flexbugs #14</a> - Chrome/Flexbox Intrinsic Sizing not implemented correctly.</li>
<li><a href="https://bugzilla.mozilla.org/show_bug.cgi?id=972595" rel="noreferrer">Firefox Bug 972595</a> - Flex containers should use "flex-basis" instead of "width" for computing intrinsic widths of flex items </li>
<li><a href="https://code.google.com/p/chromium/issues/detail?id=249112" rel="noreferrer">Chromium Issue 249112</a> - In Flexbox, allow intrinsic aspect ratios to inform the main-size calculation.</li>
</ul>

<hr>

<p>As a workaround, you could wrap each <code>&lt;img&gt;</code> with a <code>&lt;div&gt;</code> or a <code>&lt;span&gt;</code>, or so.</p>

<p><strong><a href="http://jsfiddle.net/vq01egwx/" rel="noreferrer">jsFiddle</a></strong></p>

<p><div class="snippet" data-lang="js" data-hide="false" data-console="false" data-babel="false">
<div class="snippet-code">
<pre class="snippet-code-css lang-css prettyprint-override"><code>.slider {
  display: flex;
}

.slider&gt;div {
  min-width: 0; /* why? see below. */
}

.slider&gt;div&gt;img {
  max-width: 100%;
  height: auto;
}</code></pre>
<pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;div class="slider"&gt;
  &lt;div&gt;&lt;img src="https://picsum.photos/400/300?image=0" /&gt;&lt;/div&gt;
  &lt;div&gt;&lt;img src="https://picsum.photos/400/300?image=1" /&gt;&lt;/div&gt;
  &lt;div&gt;&lt;img src="https://picsum.photos/400/300?image=2" /&gt;&lt;/div&gt;
  &lt;div&gt;&lt;img src="https://picsum.photos/400/300?image=3" /&gt;&lt;/div&gt;
&lt;/div&gt;</code></pre>
</div>
</div>
</p>

<blockquote>
  <p><a href="http://www.w3.org/TR/css-flexbox-1/#min-size-auto" rel="noreferrer"><strong>4.5 Implied Minimum Size of Flex Items</strong></a></p>
  
  <p>To provide a more reasonable default minimum size for <a href="http://www.w3.org/TR/css-flexbox-1/#flex-item" rel="noreferrer">flex items</a>,
  this specification introduces a new <a href="http://www.w3.org/TR/css-flexbox-1/#valdef-min-width-min-height-auto" rel="noreferrer">auto</a> value as the initial
  value of the <a href="http://www.w3.org/TR/CSS21/visudet.html#propdef-min-width" rel="noreferrer">min-width</a> and <a href="http://www.w3.org/TR/CSS21/visudet.html#propdef-min-height" rel="noreferrer">min-height</a> properties defined in
  CSS 2.1.</p>
</blockquote>

<hr>

<p>Alternatively, you can use CSS <code>table</code> layout instead, which you'll get similar results as <code>flexbox</code>, it will work on more browsers, even for IE8.</p>

<p><strong><a href="http://jsfiddle.net/jp1nwxb8/" rel="noreferrer">jsFiddle</a></strong></p>

<p><div class="snippet" data-lang="js" data-hide="false" data-console="false" data-babel="false">
<div class="snippet-code">
<pre class="snippet-code-css lang-css prettyprint-override"><code>.slider {
  display: table;
  width: 100%;
  table-layout: fixed;
  border-collapse: collapse;
}

.slider&gt;div {
  display: table-cell;
  vertical-align: top;
}

.slider&gt;div&gt;img {
  max-width: 100%;
  height: auto;
}</code></pre>
<pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;div class="slider"&gt;
  &lt;div&gt;&lt;img src="https://picsum.photos/400/300?image=0" /&gt;&lt;/div&gt;
  &lt;div&gt;&lt;img src="https://picsum.photos/400/300?image=1" /&gt;&lt;/div&gt;
  &lt;div&gt;&lt;img src="https://picsum.photos/400/300?image=2" /&gt;&lt;/div&gt;
  &lt;div&gt;&lt;img src="https://picsum.photos/400/300?image=3" /&gt;&lt;/div&gt;
&lt;/div&gt;</code></pre>
</div>
</div>
</p>


blocks|key|134076|text|我最近一直在使用flexbox，我通过实验和下面的推理找到了解决方案。然而，在现实中，我不确定这是否是真正发生的事情。|type|unstyled|depth|inlineStyleRanges|entityRanges|data|134077|如果实际宽度受flex系统影响。因此，当元素的宽度达到父元素的最大宽度时，在css中设置的额外宽度将被忽略。这样就可以安全地将宽度设置为100%25。|134078|由于img标签的高度是从图像本身派生出来的，因此将高度设置为0%25可以做一些事情。(这就是我不清楚的地方，what...but对我来说是有意义的，它应该修复它)|134079|DEMO++|offset|length|134080|(请记住，首先在这里看到它！)|134081|.slider+{
++++display:+flex;
}
.slider+img+{
++++height:+0%25;
++++width:+100%25;
++++margin:+0+5px;
}|code-block|syntax|javascript|134082|目前只在chrome中工作|134083|entityMap|0|LINK|mutability|MUTABLE|url|http://jsfiddle.net/techsin/xLc2Le0k/6/^0|0|0|0|0|6|0|0|0|0|0^^$0|@$1|2|3|4|5|6|7|10|8|@]|9|@]|A|$]]|$1|B|3|C|5|6|7|11|8|@]|9|@]|A|$]]|$1|D|3|E|5|6|7|12|8|@]|9|@]|A|$]]|$1|F|3|G|5|6|7|13|8|@]|9|@$H|14|I|15|1|16]]|A|$]]|$1|J|3|K|5|6|7|17|8|@]|9|@]|A|$]]|$1|L|3|M|5|N|7|18|8|@]|9|@]|A|$O|P]]|$1|Q|3|R|5|6|7|19|8|@]|9|@]|A|$]]|$1|S|3|-4|5|6|7|1A|8|@]|9|@]|A|$]]]|T|$U|$5|V|W|X|A|$Y|Z]]]]

<p>I have been playing around flexbox lately and i came to solution for this through experimentation and the following reasoning. However, in reality I'm not sure if this is exactly what happens.</p>

<p>If real width is affected by flex system. So after width of elements hit max width of parent they extra width set in css is ignored. Then it's safe to set width to 100%.</p>

<p>Since height of img tag is derived from image itself then setting height to 0% could do something. (this is where i am unclear as to what...but it made sense to me that it should fix it)</p>

<h1><a href="http://jsfiddle.net/techsin/xLc2Le0k/6/" rel="noreferrer">DEMO  </a></h1>

<p>(remember saw it here first!)</p>

<pre><code>.slider {
    display: flex;
}
.slider img {
    height: 0%;
    width: 100%;
    margin: 0 5px;
}
</code></pre>

<p>Works only in chrome yet</p>


blocks|key|134087|text|这是意料之中的行为。默认情况下，flex容器将对其所有子容器进行。图像也不例外。(即，parent将具有align-items:+stretch属性)|type|unstyled|depth|inlineStyleRanges|offset|length|style|CODE|entityRanges|data|134088|为了保持宽高比，我们有两种解决方案：|134089|134090|或者将默认的align-items:+stretch属性替换为align-items:+flex-start或align-self:+center，等等，http://jsfiddle.net/e394Lqnt/3/|ordered-list-item|134091|134092|或|134093|http://jsfiddle.net/e394Lqnt/2/将属性设置为子级本身:+like、align-self:+center或align-self:+flex-start等|134094|entityMap|0|LINK|mutability|MUTABLE|url|http://jsfiddle.net/e394Lqnt/3/|1|http://jsfiddle.net/e394Lqnt/2/^0|1G|K|0|0|0|6|K|V|N|1J|I|25|V|0|0|0|0|1C|I|1V|M|0|V|1|0^^$0|@$1|2|3|4|5|6|7|10|8|@$9|11|A|12|B|C]]|D|@]|E|$]]|$1|F|3|G|5|6|7|13|8|@]|D|@]|E|$]]|$1|H|3|-4|5|6|7|14|8|@]|D|@]|E|$]]|$1|I|3|J|5|K|7|15|8|@$9|16|A|17|B|C]|$9|18|A|19|B|C]|$9|1A|A|1B|B|C]]|D|@$9|1C|A|1D|1|1E]]|E|$]]|$1|L|3|-4|5|6|7|1F|8|@]|D|@]|E|$]]|$1|M|3|N|5|6|7|1G|8|@]|D|@]|E|$]]|$1|O|3|P|5|6|7|1H|8|@$9|1I|A|1J|B|C]|$9|1K|A|1L|B|C]]|D|@$9|1M|A|1N|1|1O]]|E|$]]|$1|Q|3|-4|5|6|7|1P|8|@]|D|@]|E|$]]]|R|$S|$5|T|U|V|E|$W|X]]|Y|$5|T|U|V|E|$W|Z]]]]

<p>This behavior is expected. flex container will <strong>stretch</strong> all its children by default. Image have no exception. (ie, parent will have <code>align-items: stretch</code> property )</p>

<p>To keep the aspect ratio we've two solutions:</p>

<ol>
<li>Either replace default <code>align-items: stretch</code> property to <code>align-items: flex-start</code> or <code>align-self: center</code> etc,
<a href="http://jsfiddle.net/e394Lqnt/3/" rel="nofollow">http://jsfiddle.net/e394Lqnt/3/</a></li>
</ol>

<p>or</p>

<ol start="2">
<li>Set align property exclusively to the child itself: like, <code>align-self: center</code> or <code>align-self: flex-start</code> etc.
<a href="http://jsfiddle.net/e394Lqnt/2/" rel="nofollow">http://jsfiddle.net/e394Lqnt/2/</a></li>
</ol>


blocks|key|134532|text|声明display:+flex;被赋予元素的位置。|type|unstyled|depth|inlineStyleRanges|offset|length|style|CODE|entityRanges|data|134533|align-items:+center;|134534|entityMap^0|2|E|0|0|K|0^^$0|@$1|2|3|4|5|6|7|J|8|@$9|K|A|L|B|C]]|D|@]|E|$]]|$1|F|3|G|5|6|7|M|8|@$9|N|A|O|B|C]]|D|@]|E|$]]|$1|H|3|-4|5|6|7|P|8|@]|D|@]|E|$]]]|I|$]]

<p>Declare where <code>display: flex;</code> was given Element.<br />
<code>align-items: center;</code></p>


blocks|key|131574|text|实际上，我发现图像标签的容器需要有一个高度，以便保持图像的比例。对于example>|type|unstyled|depth|inlineStyleRanges|entityRanges|data|131575|.container{display:flex;+height:100%25;}+img{width:100%25;height:auto;}|code-block|syntax|javascript|131576|然后在您的html中，您的容器将包装标签图像。|131577|<div+class="container"><img+src="image.jpg"+alt="image"+/></div>|131578|此操作适用于IE和其他浏览器|131579|entityMap^0|0|0|0|0|0^^$0|@$1|2|3|4|5|6|7|O|8|@]|9|@]|A|$]]|$1|B|3|C|5|D|7|P|8|@]|9|@]|A|$E|F]]|$1|G|3|H|5|6|7|Q|8|@]|9|@]|A|$]]|$1|I|3|J|5|D|7|R|8|@]|9|@]|A|$E|F]]|$1|K|3|L|5|6|7|S|8|@]|9|@]|A|$]]|$1|M|3|-4|5|6|7|T|8|@]|9|@]|A|$]]]|N|$]]

<p>Actually I found out that the container of the image tag need to have a height in order to keep the ratio of the image.
 for example></p>

<pre><code>.container{display:flex; height:100%;} img{width:100%;height:auto;}
</code></pre>

<p>then in your html your container will wrap the tag image</p>

<pre><code>&lt;div class="container"&gt;&lt;img src="image.jpg" alt="image" /&gt;&lt;/div&gt;
</code></pre>

<p>this work for IE and other browsers</p>


blocks|key|2697552|text|我也有同样的问题。使用弹性对齐将元素居中。您需要使用align-items:+center而不是align-content:+center。这将保持纵横比，而align-content将不保持纵横比。|type|unstyled|depth|inlineStyleRanges|offset|length|style|CODE|entityRanges|data|2697553|entityMap^0|Q|J|1C|L|0^^$0|@$1|2|3|4|5|6|7|H|8|@$9|I|A|J|B|C]|$9|K|A|L|B|C]]|D|@]|E|$]]|$1|F|3|-4|5|6|7|M|8|@]|D|@]|E|$]]]|G|$]]

<p>I just had the same issue. Use the flex align to center your elements. You need to use <code>align-items: center</code> instead of <code>align-content: center</code>. This will maintain the aspect ratio, while align-content will not keep the aspect ratio.</p>


<p>Using the CSS flex box model, how can I force an image to maintain its aspect ratio?</p>

<p>JS Fiddle: <a href="http://jsfiddle.net/xLc2Le0k/2/" rel="noreferrer">http://jsfiddle.net/xLc2Le0k/2/</a></p>

<p>Notice that the images stretch or shrink in order to fill the width of the container. That's fine, but can we also have it stretch or shrink the <strong>height</strong> to maintain the image proportions?</p>

<p><strong>HTML</strong></p>

<pre><code>&lt;div class="slider"&gt;
    &lt;img src="http://www.placebacon.net/400/300" alt="Bacn"&gt;
    &lt;img src="http://www.placebacon.net/400/300" alt="Bacn"&gt;
    &lt;img src="http://www.placebacon.net/400/300" alt="Bacn"&gt;
    &lt;img src="http://www.placebacon.net/400/300" alt="Bacn"&gt;
&lt;/div&gt;
</code></pre>

<p><strong>CSS</strong></p>

<pre><code>.slider {
    display: flex;
}
.slider img {
    margin: 0 5px;
}
</code></pre>


Maintain image aspect ratio when changing height

使用CSS flex box模型，如何强制图像保持其纵横比？JS小提琴：请注意，为了填充容器的宽度，图像会拉伸或收缩。这很好，但我们是否也可以让它拉伸或缩小height以保持图像比例？HTML<div class="slider">    <img src="http://www.placebacon.net/400/300" alt="Bacn">    <img src="http://www

问更改高度时保持图像纵横比
EN

回答 9

Stack Overflow用户

Stack Overflow用户

Stack Overflow用户

社区

活动

资源

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问更改高度时保持图像纵横比EN

回答 9

Stack Overflow用户

Stack Overflow用户

Stack Overflow用户

社区

活动

资源

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问更改高度时保持图像纵横比
EN