Question

我做了这个例子：

.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元素的整体高度。

目前，图像正在指示整个元素的整体高度。我想要将图像裁剪为右列中内容的大小。它可以用我的例子吗？

Answer 1

如果我理解正确，您希望右列设置#example

的整体高度

＆＃13;

.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;
}

＆＃13;

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

＆＃13;

Answer 2

您可以在父元素上使用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>

Answer 3

我希望我左边的图像被裁剪，但我想要我的内容指示.example元素的总高度。

使用img时，首先想到的是object-fit，但由于它没有最好的浏览器支持，因此这里有一个使用background-image。< / p>

通常，在使用background-image时，可以在外部CSS中设置图像源，但有时需要在标记中设置它，就像使用img时一样。

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

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

Stack snippet

.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和绝对定位的flex项目的问题，我在这里使用transform: translate来提供解决方案来使图像居中。

Stack snippet

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

Answer 4

您可以使用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>

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

4 个答案: