Automatic resizing of the image <div> when there is a second <div> inside the main shell <div>

Question

I have .well.carouselinside that I have two <div>, one is the image and the other is the title text. I managed to automatically resize the image, but when I reduce my height .well.carousel, the title text drops out .well.carousel. How do I resize an image so that the title text is also within .well.carouselwhen my height is 150 pixels?

For example, attached Fiddle

• The height .well.carouselis 150 pixels, and the title text extends beyond the well.
• When I change the height to 300 pixels, the title text gets inside the well (although the image height is 1300 pixels!). I do not understand this.
• If I change the width for .well.carouselfrom 400 pixels to 100 pixels, you can see the image scale down. But if I keep the width of 400 pixels, but only change the height from 400 pixels to 100 pixels, then nothing happens to the image. And here I want it to decrease too, just like when changing only the width.

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

Use display: flexand flex-flow: columnin the container, then set overflow: autoand flex: 1a text shell and flex: 2wrapped image

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

Run code

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

, , .

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