Html 改变高度时保持图像纵横比

Maintain image aspect ratio when changing height

提问by coderMe

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

使用 CSS 弹性盒模型，如何强制图像保持其纵横比？

JS Fiddle: http://jsfiddle.net/xLc2Le0k/2/

JS小提琴：http: //jsfiddle.net/xLc2Le0k/2/

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 heightto maintain the image proportions?

请注意，图像会拉伸或收缩以填充容器的宽度。那很好，但我们也可以让它拉伸或缩小高度以保持图像比例吗？

HTML

HTML

<div class="slider">
    <img src="http://www.placebacon.net/400/300" alt="Bacn">
    <img src="http://www.placebacon.net/400/300" alt="Bacn">
    <img src="http://www.placebacon.net/400/300" alt="Bacn">
    <img src="http://www.placebacon.net/400/300" alt="Bacn">
</div>

CSS

CSS

.slider {
    display: flex;
}
.slider img {
    margin: 0 5px;
}

采纳答案by Muhammad Umer

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.

对于 img 标签，如果您定义一侧，则调整另一侧的大小以保持纵横比，并且默认情况下图像会扩展为其原始大小。

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.

使用这个事实，如果您将每个 img 标签包装到 div 标签中，并将其宽度设置为父 div 的 100%，那么高度将根据您想要的纵横比进行调整。

http://jsfiddle.net/0o5tpbxg/

http://jsfiddle.net/0o5tpbxg/

* {
    margin: 0;
    padding: 0;
}
.slider {
    display: flex;
}
.slider .slide img {
    width: 100%;
}

回答by Matty Balaam

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

为了防止图像在 flex 父级内的任一轴上拉伸，我找到了几个解决方案。

You can try using object-fit on the image which, e.g.

您可以尝试在图像上使用 object-fit，例如

object-fit: contain;

http://jsfiddle.net/ykw3sfjd/

http://jsfiddle.net/ykw3sfjd/

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

或者您可以添加特定于 flex 的规则，这在某些情况下可能会更好。

align-self: center;
flex: 0 0 auto;

回答by Marvin Herbold

No need to add a containing div.

无需添加包含 div。

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.

css“align-items”属性的默认值是“stretch”，这是导致您的图像被拉伸到其完整原始高度的原因。将 css "align-items" 属性设置为 "flex-start" 可以解决您的问题。

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

回答by Stickers

Most of images with intrinsic dimensions, that is a natural size, like a jpegimage. If the specified size defines one of both the width and the height, the missing value is determined using the intrinsic ratio... - see MDN.

大多数具有内在尺寸的图像，即自然尺寸，如jpeg图像。如果指定的大小定义了宽度和高度之一，则使用内在比率确定缺失值... - 请参阅MDN。

But that doesn't work as expected if the images that are being set as direct flex items with the current Flexible Box Layout Module Level 1, as far as I know.

但是，据我所知，如果使用当前的弹性框布局模块级别 1将图像设置为直接弹性项目，则这不会按预期工作。

See these discussions and bug reports might be related:

看到这些讨论和错误报告可能是相关的：

• Flexbugs #14- Chrome/Flexbox Intrinsic Sizing not implemented correctly.
• Firefox Bug 972595- Flex containers should use "flex-basis" instead of "width" for computing intrinsic widths of flex items
• Chromium Issue 249112- In Flexbox, allow intrinsic aspect ratios to inform the main-size calculation.

• Flexbugs #14- Chrome/Flexbox 内部尺寸未正确实现。
• Firefox 错误 972595- Flex 容器应该使用“flex-basis”而不是“width”来计算 flex 项目的固有宽度
• Chromium 问题 249112- 在 Flexbox 中，允许固有纵横比通知主尺寸计算。

---

---

As a workaround, you could wrap each <img>with a <div>or a <span>, or so.

作为一种解决方法，您可以<img>用 a<div>或 a 等来包装每个<span>。

jsFiddle

js小提琴

.slider {
  display: flex;
}

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

.slider>div>img {
  max-width: 100%;
  height: auto;
}

<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>

4.5 Implied Minimum Size of Flex Items

To provide a more reasonable default minimum size for flex items, this specification introduces a new autovalue as the initial value of the min-widthand min-heightproperties defined in CSS 2.1.

4.5 Flex 项目的隐含最小尺寸

为了为flex items提供更合理的默认最小尺寸，本规范引入了一个新的auto值作为CSS 2.1 中定义的min-width和min-height属性的初始值。

---

---

Alternatively, you can use CSS tablelayout instead, which you'll get similar results as flexbox, it will work on more browsers, even for IE8.

或者，您可以改用 CSStable布局，您将获得与 类似的结果flexbox，它适用于更多浏览器，甚至适用于 IE8。

jsFiddle

js小提琴

.slider {
  display: table;
  width: 100%;
  table-layout: fixed;
  border-collapse: collapse;
}

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

.slider>div>img {
  max-width: 100%;
  height: auto;
}

<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>

回答by Muhammad Umer

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.

我最近一直在玩 flexbox，我通过实验和以下推理找到了解决方案。然而，实际上我不确定这是否正是发生的事情。

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%.

如果实际宽度受 flex 系统影响。因此，在元素的宽度达到父元素的最大宽度后，它们在 css 中设置的额外宽度将被忽略。然后将宽度设置为 100% 是安全的。

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)

由于 img 标签的高度来自图像本身，因此将高度设置为 0% 可以做一些事情。（这是我不清楚什么的地方......但对我来说它应该修复它是有道理的）

DEMO

演示

(remember saw it here first!)

（记得先看到这里！）

.slider {
    display: flex;
}
.slider img {
    height: 0%;
    width: 100%;
    margin: 0 5px;
}

Works only in chrome yet

仅适用于 chrome

回答by Asim K T

This behavior is expected. flex container will stretchall its children by default. Image have no exception. (ie, parent will have align-items: stretchproperty )

这种行为是意料之中的。默认情况下，flex 容器将拉伸其所有子项。形象也不例外。（即，父母将拥有align-items: stretch财产）

To keep the aspect ratio we've two solutions:

为了保持纵横比，我们有两种解决方案：

1. Either replace default align-items: stretchproperty to align-items: flex-startor align-self: centeretc, http://jsfiddle.net/e394Lqnt/3/

1. 将默认align-items: stretch属性替换为align-items: flex-start或align-self: center等， http://jsfiddle.net/e394Lqnt/3/

or

或者

1. Set align property exclusively to the child itself: like, align-self: centeror align-self: flex-startetc. http://jsfiddle.net/e394Lqnt/2/

2. 将 align 属性专门设置为孩子本身：喜欢，align-self: center或align-self: flex-start等 http://jsfiddle.net/e394Lqnt/2/

回答by kengreg

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>

其实我发现图像标签的容器需要有一个高度才能保持图像的比例。例如>

.container{display:flex; height:100%;} img{width:100%;height:auto;}

then in your html your container will wrap the tag image

然后在您的 html 中，您的容器将包装标签图像

<div class="container"><img src="image.jpg" alt="image" /></div>

this work for IE and other browsers

这适用于 IE 和其他浏览器

回答by Clinton Green

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

我只是有同样的问题。使用 flex align 将元素居中。您需要使用align-items: center而不是align-content: center. 这将保持纵横比，而 align-content 不会保持纵横比。