相关疑难解决方法(0)

我知道用CSS实际修改图像是不可能的,这就是为什么我把作物放在引号中.

我想做的是拍摄矩形图像并使用CSS使它们显得方正而不会扭曲图像.

我基本上想转此:

进入:

当流体宽度(基于百分比)容器太小而无法显示整个图像时,如何使图像保持居中？

如何将图像置于其容器中心

这意味着当容器太小时,它应该显示图像的中间而不是侧面.

根据现有的答案,我设法将裁剪图像居中.但是,我无法使中心裁剪的图像响应.

题

当我减小Web浏览器窗口的大小时,中心裁剪的图像不能很好地缩小.相反,它维护它是固定的height,width并溢出视图端口.小提琴可能会更清楚地表明这个问题.

如何才能使中心裁剪图像缩小？理想情况下,中心裁剪后的图像会在裁剪时保持良好的缩小,并保持相似的纵横比.

.centered-container {
  max-width: 960px;
  margin: auto;
}
.center-cropped-img {
  width: 640px;
  height: 360px;
  overflow: hidden;
  margin: 10px auto;
  border: 1px red solid;
  position: relative;
}
.center-cropped-img img {
  position: absolute;
  left: -100%;
  right: -100%;
  top: -100%;
  bottom: -100%;
  margin: auto;
  min-height: 100%;
  min-width: 100%;
}

<div class="centered-container">
  <div class="center-cropped-img">
    <img src="http://i.imgur.com/Ag2ZCgz.png" alt="" />
  </div>
  <div class="center-cropped-img">
    <img src="http://i.imgur.com/BQUgmlB.png" alt="" />
  </div>
</div>

同样,这里是一个小提琴,或许可以比散文更好地展示问题.

我想裁剪任何自然尺寸的图像,并给它宽度为100%,最大高度为200px,仅用于CSS.

在这里阅读了类似的问题后,我接近它,但图像仍然是水平拉伸的.

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 …

让我们说我有一个图像,250 width and 250 height我想把它裁剪成90x90

它会显示图像中的像素,但如果它是矩形,我想裁剪它,如果它是正方形则调整它,那么我该怎么做呢？

这是裁剪图像的CSS代码,但如何调整大小呢？

.image{ 
    width:90px;
    height:90px;
}
.image{
    display: block;
    overflow:hidden;
    clip:rect(0px,90px,90px,0px);
}