Flexbox等柱高度设置主柱高度?

问题描述 投票:2回答:4

我做了这个例子:

.example {
  max-width: 600px;
}

.flex-row {
  display: flex;
  flex-wrap: wrap;
}

.flex-row .col {
  flex-grow: 1;
  flex-basis: 0;
}

.flex-row .content {
  flex: 0 0 60%;
  padding: 15px;
  background: #b7bdbb;
}

.image {
  display: flex;
  justify-content: center;
  align-items: center;
  overflow: hidden;
}

.image img {
  flex-shrink: 0;
  min-width: 100%;
  min-height: 100%;
}
<div class="example">
  <div class="flex-row">
    <div class="col image">
      <img src="https://via.placeholder.com/500x265" alt="">
    </div>

    <div class="col content">
      some content
    </div>
  </div>
</div>

我希望我左边的图像被裁剪,但我希望我的内容能够决定.example元素的整体高度。

目前,图像决定了整个元素的整体高度。我想要将图像裁剪为右列中内容的大小。它可以用我的例子吗?

html css css3 sass flexbox
4个回答
2
投票

如果我理解正确你想要你的右栏设置#example的整体高度

.example {
  max-width: 600px;
}

.flex-row {
  display: flex;
  flex-wrap: wrap;
}

.flex-row .col {
  flex-grow: 1;
  flex-basis: 0;
}

.flex-row .content {
  flex: 0 0 60%;
  padding: 15px;
  background: #b7bdbb;
}

.image {
  display: flex;
  justify-content: center;
  align-items: center;
  overflow: hidden;
  position: relative;
}

.image img {
  flex-shrink: 0;
  min-width: 100%;
  max-width: 100%;
  position: absolute;
}
<div class="example">
  <div class="flex-row">
    <div class="col image">
      <img src="https://via.placeholder.com/500x265" alt="">
    </div>

    <div class="col content">
      some content
    </div>
  </div>
</div>

1
投票

你可以在父元素上使用position: relative,在图像上使用position: absolute并设置height: 100%

.example {
  max-width: 600px;
}
.flex-row {
  display: flex;
  flex-wrap: wrap;
}
.flex-row .content {
  flex: 0 0 60%;
  padding: 15px;
  background: #b7bdbb;
}
.image {
  flex: 1;
  position: relative;
}
.image img {
  height: 100%;
  position: absolute;
  vertical-align: top;
}
<div class="example">
  <div class="flex-row">
    <div class="col image"><img src="https://via.placeholder.com/500x265" alt=""></div>
    <div class="col content">some content</div>
  </div>
</div>

1
投票

我希望我左边的图像被裁剪,但我希望我的内容能够决定.example元素的整体高度。

当使用img时,首先想到的是object-fit,虽然因为它没有最好的浏览器支持,所以这里有一个使用background-image

通常,当使用background-image时,可以在外部CSS中设置图像源,但有时候想要在标记中设置它,就像使用img时那样。

在需要时经常被忽视的可能性是简单地使用style属性,这个属性并不比src上的img属性复杂,在这里可以像这样设置标记源:style="background-image: url(...)"

我也用过flex-basis: calc(60% - 30px)。这克服了IE中的2个错误,其中一个不能在速记calcflex问题中使用border-box在设置宽度中包含填充。

堆栈代码段

.example {
  max-width: 600px;
}

.flex-row {
  display: flex;
  flex-wrap: wrap;
}

.flex-row .image {
  flex-grow: 1;
  background-position: center;
  background-size: cover;
}

.flex-row .content {
  flex-basis: calc(60% - 30px);
  padding: 15px;
  background: #b7bdbb;
}
<div class="example">
  <div class="flex-row">
    <div class="col image" style="background-image: url(https://via.placeholder.com/500x265)">
    </div>

    <div class="col content">
      some content
    </div>
  </div>
</div>

如果您仍然需要(或必须)使用img,这里有一个跨浏览器工作的示例。

从几个浏览器,i.a。 Safari(似乎是从第11节修复)和IE,有Flexbox和绝对定位弹性项目的问题,我在这里利用transform: translate提供一个解决方案来居中图像。

堆栈代码段

.example {
  max-width: 600px;
}

.flex-row {
  display: flex;
  flex-wrap: wrap;
}

.flex-row .image {
  flex-grow: 1;
  position: relative;
  overflow: hidden;
}

.flex-row .image img {
  position: absolute;
  left: 0;
  top: 50%;
  width: 100%;
  transform: translateY(-50%);
}

.flex-row .content {
  flex-basis: calc(60% - 30px);
  padding: 15px;
  background: #b7bdbb;
}
<div class="example">
  <div class="flex-row">
    <div class="col image">
      <img src="https://via.placeholder.com/500x265)" alt="">
    </div>

    <div class="col content">
      some content
    </div>
  </div>
</div>

0
投票

您可以使用backgound-image属性实现此目的

.example {
  max-width: 600px;
}

.flex-row {
  display: flex;
  flex-wrap: wrap;
}

.flex-row .col {
  flex-grow: 1;
  flex-basis: 0;
}

.flex-row .content {
  flex: 0 0 60%;
  padding: 15px;
  background: #b7bdbb;
}

.image {
  display: flex;
  justify-content: center;
  align-items: center;
  overflow: hidden;
  background-image:url('https://via.placeholder.com/500x265');
  background-size:cover;
  background-position:50% 50%;
}

.image img {
  flex-shrink: 0;
  min-width: 100%;
  min-height: 100%;
}
<div class="example">
  <div class="flex-row">
    <div class="col image">
    </div>

    <div class="col content">
      some content
    </div>
  </div>
</div>
© www.soinside.com 2019 - 2024. All rights reserved.