CSS: Crop image vertically centered with max height of 200px;

Problem

I want to crop an image with any natural dimension and give it a width of 100% and a maximum height of 200px usging CSS only.

After reading a similar question here, I'm close to it, but still the image is stretched horizontally.

HTML:

<div class="moduleItemIntrotext"> <a class="moduleItemImage" href="/gestao/item/7479-o-que-é-o-zero-working-capital-e-o-que-pode-beneficiar-com-isso.html" title="Continue a ler &quot;O que é o Zero Working Capital? (e o que pode beneficiar com isso)&quot;">
                      <img src="http://www.portal-gestao.com/media/k2/items/cache/x99c309f8b22ccf674ef513c2b1fdd8b5_XL.jpg.pagespeed.ic.Me394YWuwk.jpg" alt="O que é o Zero Working Capital? (e o que pode beneficiar com isso)" width="900" height="900">
          </a>

    <p>O working capital (ou fundo de maneio) é a diferença entre o ativo corrente e passivo corrente. Numa empresa com capacidade para encarar as suas obrigações financeiras de curto-prazo, o ativo corrente supera o passivo corrente. Se essa empresa necessitasse, poderia converter todo o seu ativo corrente em dinheiro e assim liquidar todas as suas dívidas de curto-prazo.</p>
</div>

CSS:

.moduleItemIntrotext {
    overflow: hidden;
    position: relative;
}
.moduleItemIntrotext img {
    position: relative;
    margin: auto;
    max-height: 200px;
    width: 100%;
}

JSFiddle

Problem courtesy of: Nuno Nogueira

Solution

here is another possibility, keeping image into the flow and the HTML: DEMO

line-height + negative-margin to virtually reduce height needed to lay the image.

.moduleItemIntrotext img {
    position: relative;
    margin: -50% auto;/* virtualy height needed turn don to zero */
    width: 100%;/* height will follow within image ratio */
    height:auto;/* to overrride attribute height set in tag */
    vertical-align:middle;/* finalise vertical centering on baseline*/
}
.moduleItemImage {
    display:block;
    height:200px;/*set an height */
    line-height:200px;/* set the baseline at 100px from top*/
    overflow:hidden;/* crops/cut off */
}
Solution courtesy of: GCyrillus

Discussion

Here's one solution: http://jsfiddle.net/72ppd7qL/.

HTML:

<div>
    <a href=""></a>
    <p>
        O working capital (ou fundo de maneio) é a diferença entre o ativo corrente e         
        passivo corrente. Numa empresa com capacidade para encarar as suas obrigações 
        financeiras de curto-prazo, o ativo corrente supera o passivo corrente. Se essa 
        empresa necessitasse, poderia converter todo o seu ativo corrente em dinheiro e 
        assim liquidar todas as suas dívidas de curto-prazo.
    </p>
</div>

CSS:

div > a {
    display: block;
    height: 200px;
    background: url(http://www.portalgestao.com/media/k2/items/cache/x99c309f8b22ccf674ef513c2b1fdd8b5_XL.jpg.pagespeed.ic.Me394YWuwk.jpg)
                no-repeat
                center center/cover;
}
Discussion courtesy of: DRD

This recipe can be found in it's original form on Stack Over Flow.