All geek questions in one place

Set maximum width in Internet Explorer

What I need to do is set the image width limit to 100% in Internet Explorer, as other browsers with max-width . That is, if the width of the image is greater than the width of the containing region, it is reduced to fit the width of the containing region, but if it is smaller, its size does not change. Similarly, if the image is inside the table cell ( td ) and it is larger than the cell, I want it to scale to the size of the cell, not expand.

While there are other questions and answers that seem to be about this, I cannot get them to work. For example, for this solution it is usually suggested to emulate the maximum width in Internet Explorer:

http://www.svendtofte.com/code/max_width_in_ie/

Essentially using this:

 width:expression( document.body.clientWidth > (500/12) * parseInt(document.body.currentStyle.fontSize)? "30em": "auto" ); }

However, when I try to do this, I do not get the expected results at all. In some cases, I get -1 values ​​and don’t show the image at all when I check in Firebug or something like that.

And I don’t understand how this solution could work.

EDIT:

As requested, an example code is provided:

 <table cellpadding="4" cellspacing="0" summary="" id="Push12Matt__simpletable_rph_vch_32" border="0" class="simpletable"> <tr class="strow"> <td valign="top" class="stentry" width="50%"> <div class="fig fignone" id="Push12Matt__fig_6a268fd9-2a26-474f-83f5-528ffbab70d3"><a name="Push12Matt__fig_6a268fd9-2a26-474f-83f5-528ffbab70d3"><!-- --></a><p class="figcap" >Bild 1. Uponor Push 12</p> <a name="Push12Matt__image_4dd4d9ef-f95c-41f1-b423-7ddd3a2b0c06"><!-- --></a><img class="image" id="Push12Matt__image_4dd4d9ef-f95c-41f1-b423-7ddd3a2b0c06" src="/handbok/images/Push12/Push12_byggmatt.jpg" /> </div> </td> <td valign="top" class="stentry" width="50%"> <div class="fig fignone" id="Push12Matt__fig_689a2b08-ffbb-4f92-9a27-010e99665959"><a name="Push12Matt__fig_689a2b08-ffbb-4f92-9a27-010e99665959"><!-- --></a><p class="figcap" >Bild 2. Uponor ElPush 12</p> <a name="Push12Matt__image_f6d7c2fa-8ab3-4e46-b79c-e7881dff03e9"><!-- --></a><img class="image" id="Push12Matt__image_f6d7c2fa-8ab3-4e46-b79c-e7881dff03e9" src="/handbok/images/Push12/Push12Electronic_byggmatt.jpg" /> </div> </td> </tr> </table>

And simple CSS (works for all browsers except IE):

 img { max-width : 100%; max-height : 100%; }

But this does not work for this code in IE. Maybe this has something to do with the fact that it is placed in a table, I don’t know, but when I try this example with a div on W3Schools, it works fine: http://www.w3schools.com/cssref/playit. asp? filename = playcss_max-width & preval = 50% 25

UPDATE 2:

An example of a full HTML page:

 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html lang="sv-se" xml:lang="sv-se"> <head> <title>Image test</title> <style type="text/css"> body { max-height : 100%; max-width : 100%; width : 500px; } img { max-height : 100%; max-width : 100%; width : auto; height : auto; } td { max-height : 100%; max-width : 500px; display : block; }</style> </head> <body id="frontpage"> <h1 class="title topictitle1">Image test</h1> <div class="body conbody"> <table> <tbody> <tr> <td> <img src="Push12_byggmatt.jpg" /> </td> <td> <img src="Push12Electronic_byggmatt.jpg" /> </td> </tr> </tbody> </table> </div> </body> </html>

This page shows the same problem. Images do not shrink to fit in table cells. In other browsers, I can resize the window as many times as I want, and the images just shrink. IE8 and 9 no. So it seems that IE8 and 9 support max-width and max-height, but only for pixel values, and not for percentage values ​​- that is, it has only partial support ... If I'm right, I'm really surprised that this is so It’s hard to find any information on this subject on the Internet. Everyone only says that these browsers finally supported it after IE6 didn’t ...

Anyway, I wrote a jQuery workaround, but I would not want it. So if someone tells me that I’m wrong and show that IE8 and 9 do support percentage values ​​of maximum width, I would be glad to make a mistake :-)

+5
source share
3 answers

IE9 at least supports max-width percentages for images, but the percentage refers to the size of the image, not the size of the container. (This can be seen by changing 100% to, say, 70% .) It will work as expected, however, if you specify inherit instead of 100% . This inherits the container size for max-width in IE9. (I just checked your example page in IE9, Firefox, and Google Chrome, and it’s not true that for this page the images will be reduced as the window width becomes smaller). However, this is not an ideal solution; in IE8 browser mode, using inherit in this way will make the table cell width equal to the width of the image without scaling, even if the image is correctly scaled down.

+7
source

Is there any special reason why you put a div inside td?

There are two things that I think can interfere:

  • Div. If this is only for class and id, see if you can move this to the td element. If you cannot, make sure you set its width and height properties to 100%. If automatic measurements are allowed to interfere with image sizing,
  • This may be a violation due to the nature of display: table-cell; , which usually corresponds to td . Try changing its display to something like a block or an inline block and see if this fixes the problem and then from there (fyi - IE7 doesn't understand the inline block, but you can deal with it after you find out what causes the image problem )

Another alternative is to completely exclude tables. The code you provided suggests that you can use the table for layout purposes, and that’s not what they are for.

In addition, your use of attributes such as valign and valign indicates that your links are fairly outdated. I highly recommend learning more modern methods and standards. Here's an article on cellpadding to get you started.

+1
source

Setting max-width: none solved the problem in my case.

Note: tested on IE11

0
source

Source: https://habr.com/ru/post/1388128/

More articles:


All Articles