Html: Redimensionner l'image dans FormButton

Question

Je souhaite redimensionner une image à l'intérieur d'un bouton qui est entouré d'un form -tag. Mais en quelque sorte l'image ne soit pas affectée par des hauteurs css et largeurs:

Html:

<form class="infobutton"> 
     <button type="submit" 
      formaction="Resources/Documents/schnittprofilreport.pdf" 
      formtarget="_blank"> 
      <img src="Resources/Pictures/info.png"> 
     </button> 
    </form> 

Css ::

img { 
    width:25px; 
    height:25px; 
    border:2px solid black; 
} 

.infobutton { 
    margin-bottom:5px; 
} 

Answer 1

rapide et sale:

img { 
    width:25px !important; 
    height:25px !important;   
} 

Probablement il y a d'autres more specify CSS rules pour cet élément.

!important est IMO une solution radicalaire. La façon de bettwer est de créer des règles CSS qui sont plus spécifient que les autres:

Plus propre:

.infobutton button[type="submit"] img { 
    width:25px; 
    height:25px;   
} 

Answer 2

Vous devez utiliser display:block ou display:inline-block à l'image.