html – 在主包装器中有第二个时自动调整图像大小

2023年6月30日 183次阅读

我有一个.well.carousel,里面有两个< div>,一个是图像,另一个是标题文本.我设法自动调整图像大小,但是当我减小.well.carousel的高度时,标题文本就会脱离.well.carousel.我如何调整图像大小,以便当我的身高为150px时,标题文本也会保留在.well.carousel中？

例如,附上Fiddle

> .well.carousel的高度为150px,标题文本位于井外.
>当我将高度更改为300px时,标题文本将落入井内(即使图像高度为1300px！).我不明白这一点.
>如果我将.well.carousel的宽度从400px更改为100px,您可以看到图像缩小.但是,如果我将宽度保持在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
}

最佳答案 使用display：flex和flex-flow：容器上的列,然后在文本包装器上设置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>
点赞