Reduce img size when adding border

Community Forums Forums Design Tips and Tricks Reduce img size when adding border

This topic is: not resolved

This topic contains 4 replies, has 3 voices, and was last updated by  gvnet 1 year, 2 months ago.

Viewing 5 posts - 1 through 5 (of 5 total)
  • Author
    Posts
  • #13229

    gvnet
    Participant
    Post count: 9

    Hi,

    I am wondering if anyone knows how to automatically reduce the size of an image when adding a border

    e.g. when adding a border after ‘selecting’ an image, the image needs to be smaller or the border is added to the overall image size.

    I have tried

    using an outline: 4px #aaa to ad dthe border, however it chops the top of the border off (Legacy Theme)
    applying a negative margin
    reducing image height and width by the size of the border (does not respond well for ‘responsive design’

    I need the solution to be mindful of other responsive stylings for images in studiopress themes…

    There must be a way…!

    Many thanks.

    #13239

    buddy_boy8403
    Participant
    Post count: 130

    What is your site’s URL?  And which image in your site are you wanting a border around?

    #13259

    gvnet
    Participant
    Post count: 9

    @buddy boy8403 – thanks for the reply. It was a bit of a generic question but I have it sorted now.

    I apply a white border (same as background colour) to the image before it is ‘selected’ (it is a gravity forms field) and then apply a coloured border once the field (the image) has been selected.

    This keeps the image the same size before and after the change in state which keep sthe layout happy.

    Many thanks.

    #13272

    Jon Bellah
    Participant
    Post count: 109

    Add this to your CSS:

    img {
        box-sizing:border-box;
        -o-box-sizing:border-box;
        -moz-box-sizing:border-box;
        -webkit-box-sizing:border-box;
    }
    

    Follow me on the Twitters at @JonBellah. I blog about web design, development and a lot about Genesis at CSSForge.com

    #13357

    gvnet
    Participant
    Post count: 9

    Awesome @jon bellah – that’s the sort of thing I was looking for with less workarounds than my border hack…

    Many thanks.

Viewing 5 posts - 1 through 5 (of 5 total)

You must be logged in to reply to this topic.