Css: How to Scale an Image from the Center Instead of Top-Left

CSS: How to scale an image from the center instead of top-left

Just replace width: 400px; with transform: scale(2,2) on :hover.

img {

    width: 100%; max-width: 100%;

}

div {

    position: absolute; left: 20%; top: 20%;

    width: 250px;

    transition: all 2s ease-in-out;

}

div:hover {

    transform: scale(2,2)

}

<div>

    <a href="http://photobucket.com/images/cat" target="_blank">

        <img src="http://i583.photobucket.com/albums/ss278/campipr/coolcat.gif" border="0" alt="cat photo: cat coolcat.gif"/>

    </a>

</div>

CSS: center and scale up or down image while preserving aspect ratio

You can drop the inner img element and do like this.

This will work no matter image proportions.

.container {

    margin: 10px;

    width: 115px;

    height: 115px;

    border: 1px solid red;

    background: url(http://i.imgur.com/H9lpVkZ.jpg) no-repeat center center;

    background-size: contain;    

}

<div class='container'>

</div>

<div class='container' style='width:50px;height:100px;line-height:100px'>

</div>

<div class='container' style='width:140px;height:70px;line-height:70px'>

</div>

This one should scale up

<div class='container' style='width:350px;height:350px;line-height:350px'>

</div>

css/html, how to scale and center a logo image

The img tag is okay. The center tag is obsolete since about 1867. But you can easily use text-align: center as a style on the parent element of the logo.

So with a piece of HTML like this:

<div class="logo"><img src="..."></div>

and a piece of CSS like this:

.logo {
  text-align: center;
}
.logo img {
  width: 50%;
}

You should have a centered logo of about half the width of the page.

There is no shame in using the img tag, and in fact, if you want to scale, then it's very convenient to have this. An image will automatically scale its height relatively according to its width. There is no easy way to get the same effect using just a background image.

Alternatively, you can make the logo a background. But then you'll have to specify the height of the container, because it doesn't have any content at all and will otherwise collapse:

.logo {
    text-align: center;
    background-color: red;
    background-image: url('http://jsfiddle.net/img/logo.png');
    background-size: contain;
    background-position: 50% 0;
    background-repeat: no-repeat;
    height: 100px;
}

http://jsfiddle.net/cwj2b/

Transform: scale an image from top to bottom

By default, an element transforms with it's center point as the origin. So in this case it will scale from the center on out. You can change this by setting transform-origin, like you did.

Simple example:

div {

    margin: 3em auto;

    width: 50px;

    height: 50px;

    background: red;

}

div:hover {

    transform: scale(1.9);

}

.d2 {

    transform-origin:  top;

}

<div></div>

<hr />

<div class="d2"></div>

---

Related Topics