Please upgrade here. These earlier versions are no longer being updated and have security issues.
HackerOne users: Testing against this community violates our program's Terms of Service and will result in your bounty being denied.

Pictures auto sizing?

Hey there!

Im hoping someone can help me, everytime i i put a link to a picture i.e img scr= ...... and even when i try and set the size of it for some reason the width keeps on matching the width of my post so is always stretched? is there some where i need to change to get this to stop happening?

sorry if i havent explained this right but im trying to get used to this.

thanks in advance

Comments

  • hgtonighthgtonight ∞ · New Moderator

    Welcome to the community!

    What version of Vanilla are you running?

    What theme are you using?

    The issues you describe are most likely due to JS resizing. It is also possibly a CSS issue, but I would guess it is JS related.

    Search first

    Check out the Documentation! We are always looking for new content and pull requests.

    Click on insightful, awesome, and funny reactions to thank community volunteers for their valuable posts.

  • Version 2.0.18.8

    Vanilla Theme by VrijVlinder

  • any ideas as to which one it might be in?

  • hgtonighthgtonight ∞ · New Moderator

    I am calling on the V-Doc!

    @vrijvlinder do you know what is happening?

    Search first

    Check out the Documentation! We are always looking for new content and pull requests.

    Click on insightful, awesome, and funny reactions to thank community volunteers for their valuable posts.

  • if this just the width that is set it should scale proportionally, which isn't what appearers to be happening in that pic.

    grep is your friend.

  • Two suggestions,

    1) does it work properly with default theme.
    2) post your question under the theme in question - if only occurs with that theme. It makes it easier for others to find solution if there is one, later

    I may not provide the completed solution you might desire, but I do try to provide honest suggestions to help you solve your issue.

  • vrijvlindervrijvlinder Papillon-Sauvage MVP

    Hi sorry I was not here, well I was but was sleeping... As far as images go adding an image to the post will make it the size of the width of the content. That was not from the theme making it that way, it is possible that I may have made it smaller so it fit in the content box,

    I have about 12 themes, so it could help if you could tell me which one it is. And a link to the installation.

    If you want to make the images smaller, you would need to add this code or edit it if it is there.

    .Message img{max-width:200px;height:auto;}

    hgtonight
  • hi there and thanks for everyones reply, sorry ive been in work.

    the theme im using is GreenGlassversion 1.1

    link to the installation is here

    even if i try to size the img by using <img height="400" width="400" img src="http://..... it still only does the height and not the width, maybe my code is wrong as i am still only learning but i really do appreciate everyone's help

    im off to bed now so will reply in the morning (uk time)

  • vrijvlindervrijvlinder Papillon-Sauvage MVP
    edited July 2013

    Yes, ok go to line 907 of the custom.css file of the theme and change to this, which should give you the actual size of the image. If the image is smaller it will be the width of the image. If you want to make the images smaller than the full width of the image change the values to digits instead of percentage for the width. The reason for using percentages in the width is so the image can adjust to the size of the browser window .

    .Message img {
    -moz-box-shadow:2px 2px 3px rgba(0,0,0,0.5);
    -webkit-box-shadow:2px 2px 3px rgba(0,0,0,0.5);
    border:1px solid #222;
    border-radius:10px;
    box-shadow:2px 2px 3px rgba(0,0,0,0.5);
    max-width:98%!important;
    height:auto!important;
    }
    

    even if i try to size the img by using <img height="400" width="400" it still only does the height and not the width,

    The style from the custom.css supersedes the style input from the embedded image. You would have to use a style="width etc...." tag in the image code and add !important to make it do it. However if there is an !important in the custom.css it will override anything except a plugin.

    adding the height as I did above to that block of code should give you the proportional size.

    I remember why I had to add that code, the resize js from vanilla was not responding well to the flexible theme. It would resize bigger and sometimes it would take a refresh to make it resize so would have huge pictures overflowing the content.

    That code fixes it because it overrides the resize functions...

    unclegusy2khgtonight
  • Thats the one! its great when you know what your looking for

    thank you everyone for your help and fast responces

    vrijvlinder
  • vrijvlindervrijvlinder Papillon-Sauvage MVP
    edited August 2013

    You are very Welcome ! Thanks for using my theme :)

Sign In or Register to comment.