Keep an image centered while it's increasing in size

Hope you all are feeling well.

I have a layout that looks like the following:

<div style="text-align: center; border: 1px solid orange; width: 200px; height: 200px; margin:auto;">

	<img src="https://cdn2.iconfinder.com/data/icons/new-year-resolutions/64/resolutions-09-256.png" style="width: 150px;">

</div>

It is an image that is centered inside a larger div. As I increase the size of this image, it does not lose its center point, which is good. The problem is that this only applies until it’s the same size as its parent.

At the moment I have solved this with javascript. I have to move the picture left in combination with the increase to keep the picture central. I wonder if there is a smoother solution that does not include a lot of calculations with javscript. I want the picture to flow out of its parent, but I do not want the parent to have an effect on the child / image, and at the same time I want the image/child to be centered within its parent while I increase the size of it. I have tested with float and absolute, but did not succeed without a lot of javascript there either.


Anyone have an idea?

Take care!

My CSS knowledge is limited…

Try removing the image style width and the image should dynamically size to the parent div container.

Try adding margin:0 auto; to the div style tags and see if that works.

Maybe also try max-width:150px to the image to limit the size.

Yeah, try transforming it.

When you do that it is removed from the flow and behaves like a positioned element.
It will stay centered and overflow it’s parent like you are wanting.

You can use scale or translate with the transform property to accomplish this.

And how are you increasing the size?
By changing it’s native size in the css or html.

In this example below I am increasing scale on img:hover


<!DOCTYPE HTML>
<html lang="en">
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Centered Image</title>
<style>
body {text-align:center;}

.imgwrap {
  border: 1px solid orange;
  width: 200px;
  height: 200px;
  margin: 50px auto;
}
.imgwrap img {
   display:block;
   margin:auto;
   max-width:100%;
   height:auto;
   border-radius:10px;
   transition:transform 0.5s;
   /*transform:scale(1.7); set this on img, or on hover below*/
}
.imgwrap img:hover {
   transform:scale(1.7) ;
}
</style>

</head>
<body>
<h1>Centered image overflowing from parent</h1>

<div class="imgwrap">
  <img src="https://cdn2.iconfinder.com/data/icons/new-year-resolutions/64/resolutions-09-256.png">
</div>

<p>Hover on image</p>
</body>
</html>
1 Like

This is good. Thank you. How about another solution that’s more oldschool, with better support for older browsers?

Take care

Hello John. Thanks for your reply. Rays answer is what I’m looking for, but I was hoping for a solution with better support than transform can offer.

Take care

1 Like

Transform is widely supported:

Which browser(s) are you targeting that doesn’t have support?

IE versions 6-8 :slight_smile:

eek2

Can I ask why? IE6 is over ten years old, and so insecure now nobody should be using it. IE8 isn’t much better.

Sure. Client wants a program on a really old computer that doesn’t support newer browsers :slight_smile:

Well…

You Can’t Always Get What You Want :unhappy:

coothead

2 Likes

Of course I can…

You could add position relative to the parent and then absolutely place the image using top right left and bottom with negative co ordinates and then margin :auto would center the image vertically and horizontally. The negative co ordinates create an oversized canvas onto which the image is centered.

I’m not on a computer at the moment so cant make a demo but of course the oversized element could cause problems with existing content.

Ie6 may need an inner element around the image to be the positioning context and I can’t remember if ie6 obeys margin:auto on absolute elements properly so would need testing.

As others have mentioned old browsers are a big security risk and your client would need to tread carefully as nearly all the recent ransomware attacks were instigated against outdated browsers.

…But, I would humbly suggest that you…

Don’t Hold Your Breath :taped:

coothead

2 Likes

This topic was automatically closed 91 days after the last reply. New replies are no longer allowed.