CODEWITHSUNDEEP
phpcssattributesimage-gallery
MangaPower
MangaPower

Reputation: 13

Getting a CSS attribute from PHP

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!

Upvotes: 1

Views: 319

Answers (2)

Nasaralla
Nasaralla

Reputation: 1839

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.

Upvotes: 0

NekaraNef
NekaraNef

Reputation: 207

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.

Upvotes: 3

Related Questions