3

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

Community
  • 1
  • 1
  • 1
    But if the image is larger than the div, how will the text appear below it without appearing outside of the div? Also, by positioning the image absolutely, you remove it from the flow of the document, which is why the text starts at the top. – j08691 Aug 22 '14 at 21:00
  • @j08691 Thanks, it makes sense. Please see my updated question above. –  Aug 22 '14 at 21:09

2 Answers2

8

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 */
}
G-Cyrillus
  • 94,270
  • 13
  • 95
  • 118
3

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;
}
DRD
  • 5,255
  • 12
  • 14