javascript - Am I stuck with forcing fixed image size for image tags? -

javascript - Am I stuck with forcing fixed image size for image tags? -

i have website contains side bar , image of big size (about 800 pixels wide) scripted code if screen resolution small, image shrinks , scales little space according multiple browsers tested site on. tested site demo version of sortsite powermapper at:

http://try.powermapper.com/demo/

it goes on complain "omitting img width or height attributes means page text jumps images load. usability.gov 14:3"

i understand , seek include attributes, image not scale correctly.

this css utilize on image scale if had monitor max screen width of 800 pixels:

@media screen , (max-width: 600px){#x img{width: 100%}}

i specify 600px because reserved 200 pixels sidebar.

i don't think javascript reply because during page load, image placeholder jump new size, , if placed code near beginning, delay the rest of page loading somewhat.

i thinking using div tags , setting background image, problem there users won't able save , rest of images on site part of css sprite sheet.

i looking solution work many web browsers possible if javascript disabled.

any ideas answer?

this rule, while correct, went out window when responsive design came being:

omitting img width or height attributes means page text jumps images load. usability.gov 14:3

if you're going using given aspect ratio, can set code below. if set width , height attributes on img tag , set max-width: 100% (or similar) in css, people when developing responsive sites, text still jump around when image loads, because it's initial height specify in markup, , when image loads, browser maintain aspect ratio required max-width: 100% work , end shrinking height - doesn't help adhere usability rule either.

class="snippet-code-css lang-css prettyprint-override">.img { background-size: cover; background: center no-repeat; } .ar { height:0; padding: 0 0 56.25% /* 16:9 aspect ratio */ } class="snippet-code-html lang-html prettyprint-override"><div class="img" style="background-image: url(https://placekitten.com/g/500/500);"> <div class="ar"></div> </div>

javascript html css image responsive-design