html – CSS：垂直居中的裁剪图像,最大高度为200px;

概述我想裁剪任何自然尺寸的图像,并给它宽度为100％,最大高度为200px,仅用于CSS. 读完similar question here后,我接近它,但图像仍然水平拉伸. HTML： <div class="moduleItemIntrotext"> <a class="moduleItemImage" href="/gestao/item/7479-o-que-é-o-zero-working-c 我想裁剪任何自然尺寸的图像,并给它宽度为100％,最大高度为200px,仅用于CSS.

读完similar question here后,我接近它,但图像仍然水平拉伸.

HTML：

<div > <a  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

解决方法 这是另一种可能性,将图像保持在流和HTML中：
DEMO

线高负边距几乎可以降低放置图像所需的高度.

.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 */}

总结

以上是内存溢出为你收集整理的html – CSS：垂直居中的裁剪图像,最大高度为200px;全部内容，希望文章能够帮你解决html – CSS：垂直居中的裁剪图像,最大高度为200px;所遇到的程序开发问题。

如果觉得内存溢出网站内容还不错，欢迎将内存溢出网站推荐给程序员好友。