強制flex容器中的影像匹配其他flex元素的高度-有解無憂

我有兩個并排的固定寬度的 flex 元素，一個帶有文本，一個帶有影像。如何強制右側容器中的影像大小與左側容器中的文本高度動態匹配，同時保持縱橫比并避免裁剪？

.flexbox {
    border: 1px solid;
    width: 400px;
    margin: 10px;
    display: flex;
}

.left {
    width: 60%;
}

.right {
    width: 40%;
    display: flex;
    justify-content: flex-end;
}

<div class="flexbox">
    <div class="left">
        Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt
    </div>
    <div class="right">
        <img src="https://via.placeholder.com/100x200" class="placeholder" />
    </div>
</div>

uj5u.com熱心網友回復：

將您的影像設定為相對父級內的絕對位置，該父級具有 flex:1

.flexbox {
  border: 1px solid;
  display: flex;
  width: 300px;
}

.left {
  width: 60%;
}

.right {
  width: 40%;
  flex: 1;
  position: relative;
}

.placeholder{
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

<div class="flexbox">
  <div class="left">
    Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt
  </div>
  <div class="right">
    <img src="https://via.placeholder.com/100x200" class="placeholder" />
  </div>
</div>

uj5u.com熱心網友回復：

您也可以將高度和最小高度設定為最大寬度，以防它被扭曲。

object-fit&object-position還可以幫助避免失真和調整圖片大小，在螢屏上它很安靜，類似于背景位置/背景大小，但一次處理單個影像。

.flexbox {
  border: 1px solid;
  width: 400px;
  margin: 10px;
  display: flex;
}

.left {
  width: 60%;
}

.right {
  width: 40%;
  display: flex;
  justify-content: flex-end;
}

img {
  height: 0;
  min-height: 100%;
  max-width:100%;
  background:yellow;
   /* object-fit/object-position are also options here to avoid image being distorded */
}

.bis img {
  width: 100%;
  object-fit: cover;
  object-position:top 0 left 0;
}

.flexbox {
  transition: 0.25s
}

.flexbox:hover {
  width: 500px;
  font-size: 3rem;
}

hover the flex boxes to increase width and font-size and see img behavior.
<div class="flexbox">
  <div class="left">
    Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt
  </div>
  <div class="right">
    <img src="https://picsum.photos/id/221/200/400" class="placeholder" />
  </div>
</div>
You may also clip that img vi <code>object-fit</code> and <code>object-position</code>.
<div class="flexbox bis">
  <div class="left">
    Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt
  </div>
  <div class="right">
    <img src="https://picsum.photos/id/221/200/400" class="placeholder" />
  </div>
</div>

轉載請註明出處，本文鏈接：https://www.uj5u.com/qukuanlian/360248.html

標籤：html css 弹性盒

上一篇：回應式文本HTML/CSS

下一篇：為什么此代碼在我第一次運行時回傳undefined