html - 当主 包装器中有第二个 时，自动调整 图像的大小

Question

我有一个 .well.carousel在里面我有两个 <div> ，一个是图片，一个是标题文字。我设法自动调整图像大小，但是当我降低 .well.carousel 的高度时然后标题文本落在 .well.carousel 之外.如何调整图像大小，使标题文本也包含在 .well.carousel 中当我的高度是 150px 时？

例如附Fiddle

1. .well.carousel的高度为 150px，标题文本落在井外。
2. 当我将高度更改为 300 像素时，标题文本落在井内(即使图像高度为 1300 像素!)。我不明白这一点。
3. 如果我更改 .well.carousel 的宽度从 400 像素到 100 像素，您可以看到图像按比例缩小。但是，如果我将宽度保持在 400px，但仅将高度从 400px 更改为 100px，则图像不会发生任何变化。在这里我也希望它按比例缩小，就像您只更改宽度时一样。

HTML:

<div class="well carousel">
        <div class="image">
            <a href="placehold.it"><img alt="art-1" src=
            "http://placehold.it/1400x1300"></a></div>

        <div class="title">
            <a href="">title titletitle titletitle titletitle titletitle title</a>
        </div>
    </div>

CSS:

.well.carousel {
    height:150px;
    width:100px;
    border:5px solid #000000;
}

.title {
    font-size:24px;
    font-weight:bold;
    color:#333333;
    background-color:#FFF700;
}

.image {
    padding-bottom:5px
}

.image img {
    max-width:100%;
    max-height:100%;
    margin:auto;
    display:block
}

Answer 1

在容器上使用display:flex和flex-flow:column，然后设置overflow:auto和flex:1 在文本包装器上，flex: 2 在图像包装器上

( Demo )

.well.carousel {
  display: flex;
  flex-flow: column;
  height: 150px;
  width: 100px;
  border: 5px solid #000000;
}
.title {
  overflow: auto;
  font-size: 24px;
  font-weight: bold;
  color: #333333;
  background-color: #FFF700;
  flex: 1;
}
.image {
  flex: 2;
  padding-bottom: 5px;
  height: 100px;
}
.image img {
  width: 100%;
  display: block
}

<div class="well carousel">
  <div class="image">
    <a href="placehold.it">
      <img alt="art-1" src="http://placehold.it/1400x1300">
    </a>
  </div>

  <div class="title">
    <a href="">title titletitle titletitle titletitle titletitle title</a>
  </div>
</div>