"height: auto !important;" doesnt scale images properly in IE WordPress
- SOLVED
I am the developer of www.mapsmarker.com and my users can set a maximum image width in marker popups within the plugin settings. In order to achieve this, the plugin adds the following css to <head> which overrides the css for images from the main css file leaflet.css:
<style type="text/css" id="leafletmapsmarker-image-css-override">
.leaflet-popup-content img {
max-width:230px !important;
height: auto !important;
margin: 0px !important;
padding: 0px !important;
box-shadow:none !important;
}</style>
see http://current.mapsmarker.com/wp-content/plugins/leaflet-maps-marker/leaflet-fullscreen.php?marker=372 for an example, which works fine in FF & Chrome
A user now pointed out that the image height doesnt get resized to the proportional height in Internet Explorer <9. I already tried several things but didnt come to a conclusion. One of them was adding AlphaImageLoader with sizingmethod=scale - this was not an option because as far as I understand AlphaImageLoader needs a src attribute which cant be set in my case (because multiple images might be used).
The ideal solution should be css only - add additional javascript for this is not really favored due to other constraints.
Any help is appreciated.
thx
Answers (4)
Asad Iqbal answers:
If the width will auto then I think this problem may solved. For auto width you can use:
max-width:1% auto !important;
instead of:
max-width:230px !important;
Robert Seyfriedsberger comments:
doesnt work - makes image only 1% small
Asad Iqbal comments:
Can you try with these:
width:auto !important;
overflow:auto;
instead of:
max-width:230px !important;
or just with:
width:auto !important;
Let me know the result.
Duncan O'Neill answers:
Hi there,
simply replacing
max-width:230px !important with
width:230px !important
in leaflet-fullscreen.php, line 24, is working for me in IE7,IE8,IE9, and Firefox. Edit: Sorry, obviously, just make that change to the <style> declaration you're adding to the header.
best,
Duncan O'Neill comments:
Solution given above checked, and working, in Safari(5.1.2) and Chrome v 25.0.x
Robert Seyfriedsberger comments:
doesnt work. If a image is smaller than 230px, it gets stretched to 230px
Duncan O'Neill comments:
Hi Robert,
thanks for the reply.
Since you'll be using php to write the embedded <style> element, is there no way you can dynamically get the value for the width of the image, and write that into the <style> element? Something along the lines of;
<style...>
width:<?php $image['width']; ?>px !important;
....
</style>
best,
Robert Seyfriedsberger comments:
unfortunately not as there could me more than one image used in the popup...
Duncan O'Neill comments:
Hi again,
After more tests, <em>adding</em> width:auto; seems to be the solution.
So that your embedded <style> element would read;
.leaflet-popup-content img {
box-shadow: none !important;
height: auto !important;
margin: 0 !important;
max-width: 230px !important;
padding: 0 !important;
width: auto !important;
}
Naveen Chand answers:
Just thought, these two links could be of some use to you. Both these articles say that !important is not understood by IE. And they suggest workarounds. One of the links below also gives an alternative solution using expressions which I don't suggest but you may want to have a look at it.
[[LINK href="http://css-tricks.com/snippets/css/cross-browser-min-height/"]]http://css-tricks.com/snippets/css/cross-browser-min-height/[[/LINK]]
[[LINK href="http://www.webmasterworld.com/css/3128123.htm"]]http://www.webmasterworld.com/css/3128123.htm[[/LINK]]
Robert Seyfriedsberger comments:
will try that & get back with results...
Rowela Alzona answers:
Try reverse like:
.leaflet-popup-content img {
box-shadow: none !important;
height: 230px !important;
margin: 0 !important;
width: auto !important;
display: block;
}