Image resize in a box

I have an image that fits in a dashboard widget perfectly when the browser screen is maximized.

<p style="text-align: center;"><img class="aligncenter size-full" title="" src="http://mydomain.com/wp-content/uploads/2012/04/stuff-wholesale.jpg" alt="" /></p>

When the browser page shrinks however, the image overlaps the dashboard widget. How do I get the image to resize depending upon the screen?

For example, this image resizes: http://www.css-lab.com/demos/resize-img/img-resize.html

I am not sure how to get my dashboard widget image to do the same.

  • Arun Basil Lal

    Hey Atlanta,

    That was fun. Here is how to do it.

    First, you need a way to run CSS on Admin side. Use this plugin: http://wordpress.org/extend/plugins/admin-css-mu/

    Now to use with the plugin, you need the following CSS:

    .imagebox {
        border: 3px solid #333;
        max-width: 710px;  /*max width you want image to be*/
        max-height: 410px; /*max height you want image to be*/
        padding:3px;
        background:olive;
        margin:0 20px ; /* bottom margin needs to be zero for all IE's */
    }
    
    .imagebox img {
        width: 100%;
     }

    I have it attached in a file named custom_admin.css. Upload that to your wp-content/themes folder. It should look like wp-content/themes/custom_admin.css

    Now add these around your html:

    <div class="imagebox"> </div>

    It will look like this:

    <p style="text-align: center;"><div class="imagebox"><img class="aligncenter size-full" title="" src="http://mydomain.com/wp-content/uploads/2012/04/stuff-wholesale.jpg" alt="" /></div></p>

    That works!

  • Atlanta

    That was fun! Thanks! It worked. I added the code directly to Easyblogging/themes/default.css

    Question for you... I tried inserting the above code in Branding plugin's admin css but it did not work because I have Easy Blogging activated. When I deactivate Easy Blogging I can make css changes through the Branding plugin. I am trying to avoid installing another admin css plugin, eg the one that you suggested since it opens the door for conflicts down the road but I also want to avoid doing manual css edits to easy blogging each time it upgrades. How do I get the branding plugin's css to overrule the easy blogging admin css?

  • Arun Basil Lal

    Hey @Atlanta

    The plugin I mentioned is a simple one (by me), there should be no conflicts. You could use it as a mu plugin (my moving it to the mu-plugins folder, see the instructions on the plugin page) and that should be it.

    You could also use it as a function in the functions.php of your active theme, details here.

    In general, if multiple CSS styles are loaded, you can tell the browser to take preference to one of them using !important

    So each css property would look like:

    .imagebox img {
        width: 100% !important;
     }

    I hope this helps :slight_smile:

Thank NAME, for their help.

Let NAME know exactly why they deserved these points.

Gift a custom amount of points.