如何增加图像的宽度/高度,原点保持居中

时间:2012-08-30 12:07:54

标签: html css css3

我有一张图片:

<img src="my_image.png"/>

我希望它分别增加它的宽度和高度,但原点应该来自中心。因为通常当图像尺寸增加时,原点位于左上角。

4 个答案:

答案 0 :(得分:2)

您好,您可以通过display:table-cell; vertical-align:middle;&amp;获得所需的结果。 text-align:center;见下面的代码: -

你可以增加宽度和宽度根据您的要求图像的高度将出现在中心。

<强> HTML

<div id="parent">
      <img src="http://dummy-images.com/abstract/dummy-107x160-RedDots.jpg" />
    </div>

<强> CSS

#parent {
    display:table-cell;
    width : 700px;
    height : 400px;
    background-color: black;
    vertical-align:middle;
    text-align:center;
}

演示: - http://tinkerbin.com/IZxFN8cH

答案 1 :(得分:0)

这就是你想要的吗?

http://jsfiddle.net/4yR8M/

的CSS:

#container {
    width: 300px;
    height: 300px;
    line-height: 300px;
    text-align: center;
    background: #123;    
}

#container img {
    width: 100px;
    vertical-align: middle;
}

HTML:

<div id="container">
    <img src="your/image/url"/>
</div>

答案 2 :(得分:0)

我认为形象起源意味着 - 有些人说它转动了。它就像一个重力中心。当我们增加图像宽度时,增加图像的左上角保持不变,宽度朝右角增加,同样的高度朝向底部增加,

他希望从中心增加高度和宽度,而不是从RHS或底部增加 我认为最终的解决方案是使用JQuery

答案 3 :(得分:0)

使用:transform:scale();

示例:transform:scale(1.1);