使用css& /或jquery进行智能图像大小调整

时间:2013-05-07 05:52:04

标签: jquery css image resize

我设计了一个'网格视图'来显示我网站上的项目。但是,由于它完全响应,因此图像不能是固定宽度。这就是我想要实现的目标。

  1. 图片不得超过原始尺寸
  2. 图像可能不会改变比例
  3. 图像应在剪切(溢出:隐藏)它的框中垂直和水平居中。
  4. 或多或少,我试图制作图像,填充容器,但只有在不改变比例或拉伸的情况下,显然它必须检查图像的高度和宽度,它是原始尺寸但我不知道该怎么做,任何人都可以帮忙吗?

    我提供的当前网格项的简单版本如下:

    <div class="container">
        <div class="item"><div class="overflow"><img src="/bla.jpg" /></div></div>
    </div>
    

    溢出位置具有固定的高度和宽度,仅根据屏幕大小而变化,并且会“剪切”图像。

    http://jsfiddle.net/Xzzks/

    香农

1 个答案:

答案 0 :(得分:0)

我已经更新了小提琴。

http://jsfiddle.net/Xzzks/1/

重大变化

.gridItem .itemImage img {
    width:auto;
    /*min-width:100%;
    min-height:100%*/
    max-width:100%;
    max-height:100%
}

希望这有帮助。