Clever Geek Handbook

Overwrite min-width CSS in image in Safari / Chrome

I am rewriting the min-width style from 100% to auto, which works fine in Firefox, but not in Safari and Chrome. I can't figure out why ...?!

Find my samle code below or http://jsfiddle.net/zxsbodLp/ :

div img {
    min-width: 100%;
    max-width: 100%;
    width: auto !important;
    height: auto !important;
}

div.small img {
    min-width: auto;
    max-width: auto;
}
      

        
        
        
      

    
<div>
    <img src="http://lorempixel.com/400/200/" width="400" height="200" alt="" />
</div>
<div class="small">
    <img src="http://lorempixel.com/400/200/" width="400" height="200" alt="" />
</div>
Run codeHide result


+3


source to share


2 answers


The following should work.



min-width: initial!important;
+1


source


As I do not really like using! important in the provided answer and I'm not familiar with the meaning of "initial". I will try to check my solution for the same problem. Looking at https://www.w3.org/wiki/CSS/Properties/min-width I wonder why:

min-width: 0;


do not answer? This is essentially the default.

-1


source






More articles:


All Articles