DEMO

Question

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

请注意，图像会拉伸或缩小以填充容器的宽度。这样很好，但我们是否可以拉伸或缩小高度以保持图像比例？

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

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

Answer 1

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

如果你将每个img标签包装成div标签并将其宽度设置为父div的100％，那么使用这个事实，那么height将根据你想要的长宽比。

http://jsfiddle.net/0o5tpbxg/

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

Answer 2

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

您可以尝试在图像上使用对象，例如

object-fit: contain;

http://jsfiddle.net/ykw3sfjd/

或者您可以添加flex-specfic规则，这些规则在某些情况下可能会更好。

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

Answer 3

无需添加包含div。

css＆＃34; align-items＆＃34;的默认值财产是＆＃34;伸展＆＃34;这是导致您的图像被拉伸到其原始高度的原因。设置css＆＃34; align-items＆＃34;财产到＆＃34; flex-start＆＃34;解决了你的问题。

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

Answer 4

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

但据我所知，如果将图像设置为具有当前Flexible Box Layout Module Level 1的直接弹性项目，则无法正常工作。

请参阅这些讨论，错误报告可能相关：

Flexbugs #14 - Chrome / Flexbox Intrinsic Sizing未正确实施。
Firefox Bug 972595 - Flex容器应使用“flex-basis”而不是“width”来计算flex项的固有宽度
Chromium Issue 249112 - 在Flexbox中，允许内在宽高比通知主尺寸计算。

作为一种解决方法，您可以使用<img>或<div>或每个<span>包裹每个.slider { display: flex; } .slider>div { min-width: 0; /* why? see below. */ } .slider>div>img { max-width: 100%; height: auto; }。

<强> jsFiddle

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

table

4.5 Implied Minimum Size of Flex Items

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

或者，您可以使用CSS flexbox布局，您将获得与.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; }类似的结果，它可以在更多浏览器上运行，即使对于IE8也是如此。

<强> jsFiddle

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

public ActionResult MyAction() {

    var categoriesWithQuestions = 
        from c in db.Categories()
        join q in db.Questions() on c.Id equals q.CategoryId into lj
        from q in lj.DefaultIfEmpty()
        group new {q,c} by c into grp
        select new CategoriesWithQuestions
        {
            Name = grp.Key.Name,
            Questions = grp.Select(x=>x.q)
        } 

    return View(categoriesWithQuestions);
}

Answer 5

我最近一直在玩flexbox，我通过实验和以下推理来解决这个问题。然而，实际上我不确定这究竟是发生了什么。

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

由于img标签的高度来自图像本身，因此将高度设置为0％可以做一些事情。（这是我不明白的地方......但我觉得它应该修复它）

DEMO

（记得先在这里看到它！）

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

仅适用于Chrome

Answer 6

声明display: flex;在哪里被赋予元素。
align-items: center;

Answer 7

实际上我发现图像标签的容器需要有一个高度才能保持图像的比例。例如＆gt;

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

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

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

这项适用于IE和其他浏览器的工作

Answer 8

我遇到了同样的问题。使用flex对齐将元素居中。您需要使用align-items: center代替align-content: center。这将保持纵横比，而align-content不会保持纵横比。

更改高度时保持图像宽高比

8 个答案:

DEMO