Question

我有一个付费布局，当我使用.slides元素时，我的工作方式有背景颜色和高度，它按预期弯曲，但是当我切换到用图像填充它时，这种行为会破坏图片不会调整大小，我无法理解如何调整大小。

这个想法是文本的左列保持固定大小，右列向上和向下弯曲，最终以小尺寸在左列下方捕捉。

使用<img>而不是背景图片的原因是因为我想在此放置一张图片幻灯片。

有人可以帮忙解决这个问题吗？

＆＃13;

body {
  margin: 1em;
}

p {
  margin: 0;
}

.container {
  display: flex;
  margin-top: 1em;
  width: 100%;
  flex-wrap: wrap;
}

.text {
  flex: 0 0 auto;
  width: 15em;
  margin-right: 1em;
}

.images {
  flex: 1 1 auto;
  min-width: 15em;
  max-width: 800px;
}

.caption {
  margin-top: .25em;
}

＆＃13;

<div class="header">
  <a href="#">Title</a>
</div>
<div class="container">
  <div class="text">
    <p>Something about this project is really interesting.</p>
  </div>
  <div class="images">
    <div class="slides">
      <img src="https://via.placeholder.com/800x800">
    </div>
    <div class="caption">
      <p>Text about this project</p>
    </div>
  </div>
</div>

＆＃13;

Answer 1

所做的更改：

启用img元素的响应能力
注释掉flex-wrap: wrap
设置@media个查询以定义.container div内的包装何时发生

body {
  margin: 1em;
}

p {
  margin: 0;
}

img {
  display: block; /* removes bottom margin/whitespace */
  max-width: 100%; /* horizontally responsive */
  max-height: 100vh; /* vertically responsive */
}

.container {
  display: flex;
  margin-top: 1em;
  width: 100%;
  /*flex-wrap: wrap;*/
}

.text {
  flex: 0 0 auto;
  width: 15em;
  margin-right: 1em;
}

.images {
  flex: 1 1 auto;
  min-width: 15em;
  max-width: 800px;
}

.caption {
  margin-top: .25em;
}

@media (max-width: 33em) { /* 2 x 15em (.text & .images) + 2em  (left & right margin of the body element) + 1em (.text margin-right)  */
  .container {flex-wrap: wrap}
}

<div class="header">
  <a href="#">Title</a>
</div>
<div class="container">
  <div class="text">
    <p>Something about this project is really interesting.</p>
  </div>
  <div class="images">
    <div class="slides">
      <img src="https://via.placeholder.com/800x800">
    </div>
    <div class="caption">
      <p>Text about this project</p>
    </div>
  </div>
</div>

Answer 2

你的意思是这样吗？

body {
  margin: 1em;
}
p {
  margin: 0;
}

.container {
  display: flex;
  margin-top: 1em;
  width: 100%;
  flex-flow:row wrap;
}

.text {
  flex: 0 0 auto;
  width: 15em;
  margin-right: 1em;
}

.images {
  flex:1 0 15em;
  min-width: 15em;
  max-width:800px;
}

.slides {
  display:flex;
}

.caption {
  margin-top: .25em;
}

<div class="header">
  <a href="#">Title</a>
</div>
<div class="container">
  <div class="text">
    <p>Something about this project is really interesting.</p>
  </div>
  <div class="images">
    <div class="slides">
      <img src="https://via.placeholder.com/800x800" />
    </div>
    <div class="caption">
      <p>Text about this project</p>
    </div>
  </div>
</div>

调整flexbox布局中的图像大小

2 个答案: