CSS: crop image is vertically centered with a maximum height of 200 pixels;
I want to crop an image to any natural size and give it 100% width and 200px max height using CSS only.
After reading a similar question here , I'm close to it, but the image is still 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 "O que é o Zero Working Capital? (e o que pode beneficiar com isso)"">
<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%;
}
+3
source to share
2 answers
here is another possibility, while keeping the image in the stream and HTML: DEMO
line-height + negative-margin to actually reduce the height needed to position 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 */
}
+7
source to share
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;
}
+3
source to share