inline css Responsive image Need help

[oonl]

Hi,

 

Hope someone can help me out. I am new at this.

 

I have this code for displaying an image on the website. For big screens it is perfect.For smaller screens it is staying the same size. I tries with height and weight on 50% but that is not good.

 

I can`t acces the css so i hope some nows a way to scale the image in the inline code.

 

Here is my code line

 

<p><img height="90px" src="/img/vakantiereizen-banner.png" style="margin:0px auto;display:block" width="728px" /></p>

[Ingolme]

The width and height attributes only accept numbers. If you pass that through the HTML validator it will tell you it's not valid because "px" is not a number.

 

Since you don't have access to a stylesheet you'll have to add the CSS in the style attribute.

 

This should work:

<img src="/img/vakantiereizen-banner.png" style="margin:0px auto; display:block; width:728px; max-width:100%; height: auto;">

I'll break it down for you:

display: block makes the image force other elements below and above it rather than next to it. This completely remove the need to wrap it in a <p> tag or some other block element

margin: 0px auto; forces the element to have an equal margin on both sides, making it centered as a result.

width: 728px; makes the image 728px wide as long as it does not exceed the maximum allowed width.

height: auto; makes the image keep its aspect ratio.

max-width: 100%; forces the image to be no larger than the full width of the parent element that contains it.

[oonl]

Hi Foxy Mod,

 

Thank you very much this worked perfectly.

I work in a custommade cms, het <p></p> where added automaticly because i had some text below it.

I have the deleted the <p> tags, now there gone.

 

I appriciate your responce.