How to make an image stay in the middle after the 'transform: scale' is applied?

Question

This fiddle demonstrates my problem: http://jsfiddle.net/pn04dsvq/

I need to use the transform: scale for the image at the top for viewports below 500px. However for some reason after the scaling is applied the image stays on the right. I would like the image to stay in the middle horizontally.

I've tested the transform: scale function on the text at the bottom and it manages to stay in the middle. Would you know how I can achieve this for the image at the top?

On some forums I've found a transform-origin property and when I add transform-origin: left; to the image container it keeps the image on the left, however when I add transform-origin: center; it does not make any difference.

Please note that I need to use only the transform: scale function on the image. Making the image responsive based on viewport size will not work for my application. Many thanks.

The HTML code:

<div id="grey-bar">
    <div id="image-container">
        <img src="http://www.refugeeweek.org.uk/Resources/RefugeeWeek2012/Images/CounterpointsArts3.bmp">
    </div>
</div>

<h3 id="main-heading">How can I make the image above to stay in the middle after the 'transform: scale' is applied for viewports below 500px? For some reason it stays on the right.</h3>

<div id="grey-bar">
    <div id="bottom-heading-container">
        <h1 id="bottom-heading">This sentance stays in the middle after the 'transform: scale' is applied.</h1>
    </div>
</div>

CSS:

div#grey-bar {
    width:100%;
    margin-left:auto;
    margin-right:auto;
    padding-top:30px;
    padding-bottom:30px;
    background-color:grey;
}
div#image-container {
    width:100%;
    margin-left:auto;
    margin-right:auto;
    text-align: center;
}
@media screen and (max-width:500px) {
    div#image-container {
        max-width:100%;
        margin-left:auto;
        margin-right:auto;
        text-align: center;
        transform: scale(0.5);
    }
}
h3#main-heading {
    max-width:728px;
    text-align:center;
    margin-left:auto;
    margin-right:auto;
    color:grey;
}
div#bottom-heading-container {
    width:100%;
    margin-left:auto;
    margin-right:auto;
    text-align: center;
}
@media screen and (max-width:500px) {
    div#bottom-heading-container {
        max-width:100%;
        margin-left:auto;
        margin-right:auto;
        text-align: center;
        transform: scale(0.5);
    }
}
h1#bottom-heading {
    max-width:728px;
    text-align:center;
    margin-left:auto;
    margin-right:auto;
    color:white;
}

set logo width to 100%; so that it adjusts http://jsfiddle.net/victor_007/pn04dsvq/7/ — Vitorino fernandes, Nov 01 '14 at 14:01
@VitorinoFernandes Unfortunately in my application setting the logo width to 100% will not be possible. I can only apply the scaling function. — Piotr Berebecki, Nov 01 '14 at 14:55
It stays center but you can try this: http://jsfiddle.net/gxufphje/ — Christina, Nov 01 '14 at 19:32
@Christina Many thanks for the fiddle. However when the width is very narrow the logo still sways towards right. Whereas the sentence at the bottom stays perfectly in the center. — Piotr Berebecki, Nov 02 '14 at 09:06
You need to make the image responsive. http://jsfiddle.net/gxufphje/1/ — Christina, Nov 03 '14 at 04:07
Thanks Cristina for trying to help me. I'm aware that when the image is responsive then it will stay in the center. Unfortunately in my application I can only use the transform scale function. — Piotr Berebecki, Nov 03 '14 at 13:15

Chiron · Answer 1 · 2014-11-06T05:14:13.403

0

On my Firefox the problem you described occurred. I suggest adding 'center' tag to solve it:

<center>   </center>

then it showed at center on my Firefox as expected.

Since you want your img centered in your container, it should look like this:

<div id="image-container">
  <center>
    <img/>
  </center>
</div>

So as to make it compatible to both newer html5 and older html resolver, you'd better keep both "center" tag and "text-align" attr. The code above showed to be like this:

like this on my Firefox

edited Nov 06 '14 at 05:14

answered Nov 01 '14 at 14:09

Chiron

844
1
7
19

I've added the tags around the image container and it did not work. Could you please add a link to your fiddle? – Piotr Berebecki Nov 01 '14 at 14:53
`` is deprecated. See explanation [HERE](http://stackoverflow.com/a/1798853/1581050). – ǝsʞǝꓕ ɐuɹɐꓭ Nov 03 '14 at 13:40
I've extended the answer above for your confusion. Please have a look if you noticed this comment. – Chiron Nov 06 '14 at 09:23
The CSS equivalent for the `` tag which is deprecated is `text-align:center;` – Jonathan Marzullo Jul 27 '16 at 19:32

How to make an image stay in the middle after the 'transform: scale' is applied?

1 Answers1