[Solved] Picture frame around my images?

[ckubs]

I know the title sounds pretty noobish but my problem is a s follows. I know how to make a picture frame around an image( or I hope so, I’m no CSS expert) but in my website(wordpress) when I do that, I get the desired border but it scalles down my image.

If I make the white border picture by putting a box shadow, white background and a padding of 4px, a square image of let’s say 200×200 with the border it get’s scalled down to 192×192 and a landscape one proportionally with the same 4px / 4px horizontally and only 2px / 2px vertically.

I can put somehow the image border on top of the image, or that is the only way? Tried a plugin but it worked the same way, tried to make use of :before but I guess it was a silly thing. I’m puzzled.

[Atelierbram]

You could use outline: 4px instead of border, or set box-sizing: border-box on the element with the border. Can put that one on all elements as well:

*,
*::before,
*::after {
  -webkit-box-sizing: border-box;
     -moz-box-sizing: border-box;
          box-sizing: border-box;
}

You can read up on box-sizing on an article on this site

Some examples tagged border-box on Codepen

More: Paul Irish on the subject

[Paulie_D]

Box-shadows are not included in element sizes and so will not shrink the image like a border.

The added benefit of box-shadows is that you can use more than one and thus get multiple ‘borders’

[Atelierbram]

@Paulie_D

Box-shadows are not included in element sizes and so will not shrink the image like a border.

Padding will effect element size though, so without box-sizing: border-box @ckubs problem remains, no? Or am I missing something again?

[ckubs]

Thanks, I’ll look at that :) Since posting I made a picture too, to see what I want to achieve, I’m not the best person to describe stuff.

picture

[ckubs]

Uh forgot about that. So basically I can put 2 box shadows, 4 px for the frame and 1px on the outside? :D

[Paulie_D]

I’m still not entirely clear what it is you are trying to do….your two ‘I want it’ options are different.

[Atelierbram]

Not clear for me either, opted here for ‘how I want it 2’.

http://codepen.io/atelierbram/pen/cxhjL

which has no box-shadow, so that may not be what you want at all, …

[ckubs]

Yes I want to keep the image size and the frame to be wether over my image as in the case one , or outside the image, not to take from it’s width or height, as in the case two.

Now, I’ll take your advices into consideration, and as a second solution I found a function that wraps the images in a defined div when inserted in wordpress editor so donno, I guess the topic can be marked as solved.

[Author]

Posts