Getting a CSS attribute from PHP

Question

It's my first time asking here (I have visited the site several times, but never asked). Well, let's go to the question:

It happens that I'm developing a live image resizer (I know it already exists, but I'm doing my own for my own projects). It has three parameters: the image path (obviously), the size I want to resize and the extra margin I want to add. The idea is to resize the image inside a box with square dimentions. The problem is, the size I want to resize depends on the size of the outer box. For example, I have this HTML code:

<div class="image_outer_box">
   <img width="300px" height="199px" style=" margin: 65.5px 15px;" src="img.jpg">
</div>

The properties of "image_outer_box" are the following:

.image_outer_box
{
   height: 330px;
   width: 330px;
   border:solid 1px #737373;
}

The function I call is this:

liveResize($img, $size, $extramargin);

The problem here is when I send the $size, since I must be aware of the CSS properties of "image_outer_box" in order to make the right resize. And, as you can see, it's not only a matter of the size specified in "image_outer_box" but the margin I want to add. Actually, I wanted to add 15px of extra margin for the image and resize the image inside 300x300.

It's not critical to have a way to get the CSS attributes from this particular class, but it would help if I (and other developers) can apply the function without being aware of the CSS attributes of the container where the image will be placed.

If there's a way to make it, I would be great.

Thanks! (for the other times I came here to search a solution and I found it!!!)

EDIT: I found a way that doesn't require to get the CSS properties, but still I would like to have info for this matter. Thanks for those who tried to help 'til now!

NekaraNef · Accepted Answer · 2011-11-04 11:33:26Z

3

Do you want to actually store the resized image, or are you just trying to display it resized? If the latter is the case, the following solution might help:

HTML

<div class="image_outer_box" style="background:url('img.jpg') no-repeat; background-position:50% 50%; background-size:100%;"> 
</div>

CSS

.image_outer_box
  {
  margin:10px;
  height: 330px;
  width: 330px;
  border:solid 1px #737373;
  }

Of course, this doesn't allow you to manually set the width and height of the image, since that depends on our CSS entirely. Change the CSS, and the size of the image will automatically change as well. I like this method quite a bit, but it won't get very far if you want to store the image or if you want to be able to set the image size manually.

answered Nov 4, 2011 at 11:33

NekaraNef

2071 gold badge2 silver badges8 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

MangaPower Over a year ago

Well, actually I'm not resizing to 300x300,... I mean the outer box has 330x330, but the image inside don't have to be 300x300 if the extra margin is 15px. I can be 100x300 or 300x100 or even 100x100... What I'm really doing is redimensionate the image according to it original dimentions. In the other hand, depending on the dimentions, the margin changes.

MangaPower Over a year ago

I got an idea seeing your example: I don't need to give "image_outer_box" a fixed dimension. With just the image dimension and some other attributes (for both, the container and the image) I can have a really good-looking image gallery. I will upload the code so everyone can see it.

Nasaralla · Accepted Answer · 2011-11-04 11:35:29Z

0

I think in order to be aware of the CSS and change according to the current client side state of the image you should (I mean I would recommend) use Javascript and maybe if you want to keep the function call it over AJAX.

answered Nov 4, 2011 at 11:35

Nasaralla

1,82913 silver badges11 bronze badges

Collectives™ on Stack Overflow

Getting a CSS attribute from PHP

2 Answers 2

2 Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

2 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related