Override inline img CSS, with inline CSS on container div

Question

I'm trying to find a way to override an inline width on an img tag, using inline css.

I do NOT have access to an external style sheet.
I can't change the img tag with its inline CSS. I'm working with a template and it's populated later.

What I want is to place a container div around the image tag such that the max-height=180, and max-width=120. Is there some sort of CSS magic and or trickery that I can do this?

<div style="put something here to override the 320px below">
        <img src="path/to/image" style="width:320px">   <!-- fixed tag -->
</div>

please try to use !important in inline-style and say that works or not? — Bhojendra Rauniyar
– Bhojendra Rauniyar, Commented Aug 29, 2014 at 3:59

Robby Cornelissen · Accepted Answer · 2014-08-29 04:20:50Z

2

You can add a small style block inline (fiddle here):

<style type="text/css">
    div img {
        width: 120px !important;
    }
</style>
<div>
    <img src="http://cdn.sstatic.net/stackexchange/img/logos/so/so-logo.png"
        style="width:320px"/>
</div>

You probably would want want to add an ID to the div and the style rule to prevent unwanted effects in the rest of your page.

Update

If style elements cannot be used, you could try the following, using a CSS transform (fiddle here):

<div style="display: inline-block;
            transform: translate(-100px, -30px) scale(0.375, 0.375);">
    <img src="http://cdn.sstatic.net/stackexchange/img/logos/so/so-logo.png"
           style="width:320px"/>
</div>

Now, your mileage will obviously vary depending on the level of CSS3 support in the mail client's rendering engines.

edited Aug 29, 2014 at 4:20

answered Aug 29, 2014 at 3:35

Robby Cornelissen

98.6k23 gold badges154 silver badges180 bronze badges

Sign up to request clarification or add additional context in comments.

10 Comments

Vyteo Over a year ago

this might be the best/easiest answer. I'm having a "duh" moment reading it. Giving it a try for my test case... :D

Kheema Pandey Over a year ago

but remember the major role is playing here is !important.

Bhojendra Rauniyar Over a year ago

This won't work as inline style important not work then it also not work, please read my answer properly what I'm saying to use id and apply the style for that which won't be overriden by some script because that script is using no class or id....

Kheema Pandey Over a year ago

just saw your comments that's why I removed my comments

Vyteo Over a year ago

I'm not sure why this was given -1. The Fiddle demo works. Unfortunately, I can't use style, or script tags. The editor strips them out.

|

Moshtaf · Accepted Answer · 2014-08-29 03:36:14Z

1

Could you use JQuery? if yes this is a solution:

$("img[style='width:320px']").css("width","100px");

Check JSFiddle Demo

answered Aug 29, 2014 at 3:36

Moshtaf

4,9132 gold badges27 silver badges34 bronze badges

3 Comments

Vyteo Over a year ago

I thought about trying this. It's for an email template, so I don't know the effects of using jQuery, or even if I can.

Moshtaf Over a year ago

@SteveUser:No, if it's for an email template i don't think it's possible to use JQuery.

Vyteo Over a year ago

OK, I thought so. Also, the template editor strips out the script tag. Thanks for the help though!

Collectives™ on Stack Overflow

Override inline img CSS, with inline CSS on container div

2 Answers 2

10 Comments

3 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

10 Comments

3 Comments

Your Answer

Sign up or log in

Post as a guest

Related