How to make image be displayed automatically fit the container?

wzttest1

Hi:

The following is the vanilla default html code of css and js in many pages.I want to implement a feature in my code that makes the images can be displayed automatically fit the container.But I do not know which of the following codes should be used in my code and how to enable the feature.

Anybody can help?Thanks.

<link rel="stylesheet" type="text/css" href="/vanilla_2-0-18-8/applications/dashboard/design/style.css?v=2.0.18.8" media="all" /> <link rel="stylesheet" type="text/css" href="/vanilla_2-0-18-8/plugins/FileUpload/design/fileupload.css?v=1.5.2" media="all" /> <link rel="shortcut icon" href="/vanilla_2-0-18-8/themes/default/design/favicon.png" type="image/x-icon" /> <link rel="canonical" href="http://192.168.0.101/vanilla_2-0-18-8/discussion/15/test-attachment/p1" /> <script src="/vanilla_2-0-18-8/js/library/jquery.js?v=2.0.18.8" type="text/javascript"></script> <script src="/vanilla_2-0-18-8/js/library/jquery.livequery.js?v=2.0.18.8" type="text/javascript"></script> <script src="/vanilla_2-0-18-8/js/library/jquery.form.js?v=2.0.18.8" type="text/javascript"></script> <script src="/vanilla_2-0-18-8/js/library/jquery.popup.js?v=2.0.18.8" type="text/javascript"></script> <script src="/vanilla_2-0-18-8/js/library/jquery.gardenhandleajaxform.js?v=2.0.18.8" type="text/javascript"></script> <script src="/vanilla_2-0-18-8/js/global.js?v=2.0.18.8" type="text/javascript"></script> <script src="/vanilla_2-0-18-8/js/library/jquery.ui.packed.js?v=2.0.18.8" type="text/javascript"></script> <script src="/vanilla_2-0-18-8/js/library/jquery.autogrow.js?v=2.0.18.8" type="text/javascript"></script>

vrijvlinder

try this plugin

http://vanillaforums.org/addon/controllsize-plugin

Tama

.Message {
     min-width: 100%;
}

try adding this to your theme's custom.css file

wzttest1

@vrijvlinder said:
try this plugin

http://vanillaforums.org/addon/controllsize-plugin

This is not what I needed,I need some js how to code for this feature.

Thank you.

wzttest1

@Tama said:
.Message {
min-width: 100%;
}

try adding this to your theme's custom.css file

Hi:

This can not resize the images to fit the container.
I think need some js code for this.But I do not know how vanilla implement it.

Thanks.

Tama

@wzttest1 said:
Thanks.

oops my bad I forgot something

.Message img { min-width: 100%; } 

is the correct css

wzttest1

@Tama said:
is the correct css

Hi Tama:

Great!

I used max-width:100%; for my code,I need prevent the big size image over the border with the vanilla default css.

You helped me fix this issue with so simple code.Before this I was plan to write some complicated js code to fix it.
Thank you very much.

vrijvlinder

Which is also what the controllsize plugin does, not sure why you said you must use js to achieve this...

Shadowdare

You should also include the declaration height: auto;, so that images that get scaled when they exceed the width of a container stay proportional.

vrijvlinder

Which is also what the controllsize plugin does !!!

http://vanillaforums.org/addon/controllsize-plugin

wzttest1

@Shadowdare said:
You should also include the declaration height: auto;, so that images that get scaled when they exceed the width of a container stay proportional.

You mean the right code should be the following?

.Message img { min-width: 100%;height:auto; }