How to make the Y-center of the image ON CLIP, but let it be upright if it is smaller than its container?

Question

I have a container containing an image. The image fills the container horizontally, and the container responds to the page size. See Violin:

im html

<div id="container">
  <img src="http://silberschauer.de/img/pre/045.jpg" />
</div>

in css

#container {position:absolute;top:1em;left:1em;bottom:2em;
 width:30%;background:#0f0;overflow:hidden;}
#container img {width:100%;}

https://jsfiddle.net/t4um60k1/8/

Is it possible to have the top and bottom of the image the same if (and only if) the container becomes smaller along the y axis than the image with css?

EDIT: You did not understand the question of whether your decision would have a green area ABOVE the image in any circumstances.

Answer 1

, , , v, css?

, CSS. Flexbox .

JS. HTML.

CSS:

#container {
    display: flex;                   /* new */
    flex-direction: column;          /* new */
    justify-content: space-between;  /* new */
    position: absolute;
    top: 1em;
    left: 1em;
    bottom: 2em;
    width: 30%;
    background: #0f0;
    overflow: hidden;
}

#container::before, #container::after {
    content: '';
}

#container img {
    width: 100%;
    flex-shrink: 0;
}

https://jsfiddle.net/t4um60k1/10/

---

Flexbox (flex-direction: column).

, (, ) space-between.

justify-content: space-between , , , . , column, .

, , "phantom" .

, justify-content: center ?

, , .

justify-content: center .

space-between, flex , space-between flex-start, ( . ).

, , , , flex-shrink: 0, , .

---

space-between flex-start

:

Flex . line, flex-start.

Flex .... , .

( )

: https://www.w3.org/TR/css-flexbox-1/#justify-content-property

---

, Flexbox IE 8 9. , Safari 8 IE10, . , , CSS : Autoprefixer.

Answer 2

css . , .

#container img {
  width:100%;
  position: absolute;
  margin: auto;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
}

jsfiddle

, v, .