Responsive image inside a dynamic block

Question

I need to code the following block. The main block is responsive, and it has 2 other blocks inside, one of them has a static width, and other is dynamic (the img). How to make an image a fluid width, but the static height inside the main container?

the screenshot is here — http://joxi.ru/9xcvUtg5CbAxZuPPZH4

Thanks, http://jsfiddle.net/LSRPk/ is something similar, bud i should make the image height the same height as the main block height. — robuh, Sep 10 '13 at 13:31
Yes, ideally, it should fit in it's block, without changing the aspect ratio. — robuh, Sep 10 '13 at 13:38
http://playground.obuh.by/tmp just the code, without images, the main gray box is image — robuh, Sep 10 '13 at 13:39
sooo you want 1. to keep aspect ratio 2. fill every pixel on the right 3. cut off invisible parts (above/below the big box) — biziclop, Sep 10 '13 at 13:40
yes, is it able to make? for example, to fit image by height in the box, and crop (to make invisible) other patrs of the picture. — robuh, Sep 10 '13 at 13:49
This may be what you want: http://stackoverflow.com/questions/376253/stretch-and-scale-css-background — biziclop, Sep 10 '13 at 13:50
the image should be as an tag, not as the background. is it possible? — robuh, Sep 10 '13 at 13:52

score 0 · Answer 1 · answered Sep 10 '13 at 14:23

It needs 2 wrapper divs, but it seems to work: http://jsfiddle.net/LSRPk/2/

The HTML:

<div class="bonsai-kitten">
    any<br>content<br><br><br><br><br><br><br>height
    <div class="rubberimage">
      <div class="vertical-centerer">
        <img src="kitten.jpg">
      </div>
    </div>
</div>

CSS:

.bonsai-kitten {
    border: 3px solid red;
    position: relative;
}

/* image area next to the sidebar */
.rubberimage {
    position: absolute;
    left: 200px; /* assuming fixed sidebar width */
    right: 0;
    top: 0;
    bottom: 0;
    overflow: hidden;
}

.rubberimage .vertical-centerer {
    position: absolute;
    left: 0;  right: 0;  /* means width: 100%; */
    top: 50%;
    line-height: 10000px; /* large enough? */
    margin-top:  -5000px;
    vertical-align: middle;
}

.rubberimage img {
    display: inline-block;
    vertical-align: middle;
    width: 100%;
}

Responsive image inside a dynamic block

1 Answers1