Html 自动调整大小a<；部门>；存在第二个图像时的图像<；部门>；主管道内部<；部门>；包装纸

我有一个

.well.carousel

，里面有两个

，一个是图像，另一个是标题文本。我设法自动调整了图像的大小，但是当我降低

.well.carousel

的高度时，标题文本就会从

.well.carousel

中掉出来。当我的高度为150px时，如何调整图像的大小，使标题文本也保持在

内。好的。carousel

例如，附件

.well.carousel

的高度为150px，标题文本位于井外

当我将高度更改为300px时，标题文本会落在井内（即使图像高度为1300px！）。我不明白

如果我将

.well.carousel

的宽度从400px更改为100px，您可以看到图像比例缩小。但是如果我将宽度保持在400px，但仅将高度从400px更改为100px，则图像不会发生任何变化。在这里，我希望它也能缩小，就像你只改变宽度一样

HTML:

---

在容器上使用

display:flex

和

flex flow:column

，然后在文本包装器上设置

overflow:auto

和

flex:1

，在图像包装器上设置

flex:2

（）

.well.carousel{
显示器：flex；
柔性流动：柱；
高度：150像素；
宽度：100px；
边框：5px实心#000000；
}
.头衔{
溢出：自动；
字体大小：24px；
字体大小：粗体；
颜色：#333333；
背景色：#FFF700；
弹性：1；
}
.形象{
弹性：2；
垫底：5px；
高度：100px；
}
.图像img{
宽度：100%；
显示：块
}

好。（没有双关语）

编辑：由于下面的评论。也许我没有抓住重点；但我只是说，您可以声明与%相关的最大和最小属性，并切换位置，以使滑块中的所有元素一起“响应”，而不会出现不正确的位置；无论你支持什么样的决心

这是一个非常简单的例子：

在您的浏览器中重新调整JSFIDLE的大小，以查看它的响应，而不会掉到不合适的位置

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

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

---

切换最小高度：大到足以填充！在该CSS3下，我要做的是，当我手动更改well.carousel的高度时，图像会自动调整大小。如果我没有标题文本，那么它将与我的原始代码一起工作。但是，如果well.carousel中包含标题文本div，则无法使其正常工作（图像不会像没有标题文本div时那样缩小）。如果手动更改well.carousel的高度，则图像不会缩小。请看我上面的评论。也许可以更好地解释我的问题：我更新了我的小提琴-如果我将well.carousel的宽度从400px更改为100px，您会看到图像缩小。但是如果我将宽度保持在400px，但仅将高度从400px更改为100px，则图像不会发生任何变化。在这里，我希望它也能缩小，就像你只改变宽度一样。

<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>

.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
}

#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
}

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