html - 原点を中心にした状態で、画像の幅/高さを増やす方法

Question

私は画像を持っています：

<img src="my_image.png"/>

そして、幅と高さをそれぞれ大きくしたいのですが、原点は中心から持っている必要があります。一般的に画像サイズが大きくなると、原点は左上隅になります。

Answer 1

display:table-cell; vertical-align:middle;こんにちはあなたは＆を通してあなたの望む結果を得ることができます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

Answer 2

これは、あなたの望むことですか？

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>

Answer 3

私はイメージの起源が意味すると思います-一部の人々はそれがピボットすると言いました。それは重力の中心のようなものです。画像の幅を大きくすると、画像の左上隅が一定に保たれ、幅が右隅に向かって大きくなり、同じ高さが下に向かって大きくなります。

彼は、RHSや下部からではなく、中央から高さと幅を増やしたいと考えています。最終的な解決策はJQueryを使用することだと思います。

Answer 4

使用：transform：scale（）;

例：transform：scale（1.1）;