Question

我有一个.well.carousel，里面有两个<div>，一个是图像，另一个是标题文本。我设法自动调整图片大小，但是当我缩小.well.carousel的高度时，标题文字就会超出.well.carousel。如何调整图像大小以使标题文本在我的高度为150像素时仍保持在.well.carousel内？

例如，附加Fiddle

.well.carousel的高度为150像素，标题文字位于井外。
当我将高度更改为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
}

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>

Answer 2

嗯。（没有双关语）

#outterelement { 
    position: relative; // Everything relative to me, right?
}

#elemant { 
  min-width: 100px; // pixels
  max-width: 300px; // pixels
  width: 100%; // leave % here
  max-height: 200px; // pixels
  min-width: 100px; // pixels
}

修改：由于下面的评论。也许我在这里错过了重点;但我只是说你可以声明max和min属性与％和切换位置相关联，以保持滑块内的所有元素“响应”在一起而不会失去位置;无论你支持什么决议。

一个非常简单的例子：

JSFIDDLE

在浏览器中重新调整jsfiddle的大小，使其看到响应而不会失控。

如果您需要更多独特的治疗; CSS3媒体查询用于为每个视口和分辨率定义不同的样式：

如果您希望标题在小视口下填充所有内容。

@media screen and (max-width: 400px) {
   @-ms-viewport { width: 320px; }
   #title { 
       margin-top:-20px;
       min-height: 220px;
        }
}

当主<div>包装器

2 个答案: