Reset image width and height set via css

Question

I'm trying to create a fluid-layout in html, containing images. For now, I support 2 sizes for the layout. The default layout is used to display a 1000px wide site. If the screen is wide enough (wider than 1200px), I enhance many aspects with css media queries.

I have a DIV container that is 600px wide for the default layout, and 700px for the enhanced layout. There is a random image inside, for which I know some metadata (width and height). I may need to downsize the image if it is too large for the container.

So I use this code to have a fluid-layout

<div class="container">
  <!-- for a 650px/400px image, the downsized version is 600px/369px -->
  <img src="/image?id=1234" width="650" height="400" style="width:600px;height:369px" />
</div>

and the style

@media screen and (min-width:1200px){
  .container IMG {
    width:auto !important;
    height:auto !important;
  }
}

Here is how it works:

In case of the default layout, the inline style applies. So the image is down-sized to 600px/369px to fit the container. Otherwise, the media query style applies, and the image is at its default width/height (I know the image is never wider than 700px so all is fine).

My problem comes from the loading state of the image and the space reserved by the browser. The behaviour of chrome/firefox is the same but is quite strange for me. Not tested with IE (not my priority actually)

For the default layout, no problem, the inline-style still applies. The browser displays a white space corresponding to the image.

For the enhanced layout, the "auto" sizes applies. But the browser does not know the natural size of the image while it is not fully loaded, and it appears that "auto" is equivalent to 0px. It would be perfect if the width and height attributes set for the image applied. But it is not the case. The result is that no space is reserved for the image, which is not the behaviour I want.

A first solution I found is to add another inline css rule for the image. If I add "min-width:600px; min-height:369px" the reserved space for the image is always 600x369 pixels, instead of 0 pixels for the enhanced layout. That's better, but not perfect yet.

-- What do you think ?

Is it possible to "reset" the css instead of overriding it with the "auto !important" rule ?
Should I use an other approach ?
I may use some javascript, but I think it is a bad idea to rely on it. Actually, I may have a lot of containers similar to the one described above. I prefer an automatic solution (css is great for that).

Do you know if it is possible to add an inline media query for an element ? I don't think it is possible. But if it is, I could write: — Mat, Mar 30 '12 at 14:56
related: https://stackoverflow.com/questions/44010645/remove-height-auto-using-css — Ciro Santilli OurBigBook.com, Aug 18 '20 at 08:27

score 4 · Answer 1 · edited Dec 18 '17 at 18:57

4

you can just set the width or height to initial.. that resets the Value on override..

edited Dec 18 '17 at 18:57

random_user_name

25,694
7
76
115

answered Jul 29 '15 at 12:31

Kim Yang Jacobsen

87
4

4

This actually doesn't work. If an image has `width` and `height` attributes, and there is ANY css that sets a width, then it seems as though there's no way to get it to honor the attribute values... – random_user_name Dec 18 '17 at 18:59

score 1 · Answer 2 · answered Mar 30 '12 at 13:55

1

The general approach that I've seen thrown around for responsive images is to have a parent element (like .container) change sizes with media queries. In your markup remove the width and height attributes, and then in your CSS add:

img {
   width: 100%;
 }

As your parent element's size is dictated by media query rules, your image will grow accordingly.

I'm bringing this up because it looks like you want to use the same image file, but just have it grow/shrink. The major drawback is that a larger image could load on a mobile device screen, and add to page load. This is the major technical hurdle facing Responsive design currently, and there is great debate about the best way to address it.

answered Mar 30 '12 at 13:55

chipcullen

6,840
1
21
17

I just made a test. Actually I face the exact same problems but for a reason I did not explain in my first post. I know the width of the container, but I don't know its height. I want the height of the container to be the same than the child image. So, during the load of the image, the container still has no height. – Mat Mar 30 '12 at 14:42
About using the same image for both layouts, I have 2 reasons: (1) if the image is lesser than 600px wide, it's the exact same image for both layout. (2) I think the overhead from 600px to 700px is not large enough to imply an important weight reduction of the image. But if I have 2 images, I must store the 2 image on server side. – Mat Mar 30 '12 at 14:48
Re: image size - that's a good reason to use the same image. 100px difference isn't enough to warrant a much more complicated solution. Re: parent container - If you don't set an explicit height of the parent container, it *should* grow with the image, regardless of the image's height. Is that not the case for you? – chipcullen Mar 30 '12 at 16:52

score 0 · Answer 3 · answered Mar 30 '12 at 13:48

0

Use .container IMG.someClass { ... } then you can remove the class name from the image to remove the CSS styling.

answered Mar 30 '12 at 13:48

Diodeus - James MacFarlane

112,730
33
157
176

It's right that I need the styling only for the default layout. So when I detect the enhanced layout, I can remove the class with Javascript. But as I said at the end of my first post, by doing that I loose all great features provided by css media queries, no ? – Mat Mar 30 '12 at 14:52

Reset image width and height set via css

3 Answers3