Vertikal Bild verkleinern

Question

Ich habe ein Bild, dass ich die Höhe 75% von dem machen möchte, was es normalerweise wäre. Ich benutze ein responsives Layout, das kann nicht mit festen Pixelhöhen, etc. gemacht werden. Das funktioniert nicht als Hintergrundbild, also frage ich mich, ob es einen ähnlichen Effekt gibt wie background-size: 100% 75%;, aber das funktioniert mit einem img Tag? Ich möchte das nur mit CSS erreichen.

Edit:

Beispiel: https://jsfiddle.net/x9n0t4bu/

HTML:

<div id="disp"> 
       <a href="google.com"><img src="http://wowslider.com/sliders/ 
demo-10/data/images/dock.jpg"></a> 
      </div> 

CSS:

#disp{ 
    margin-top:-17.9px; 
    width: 100%; 
} 

#disp img{ 
    width:100%; 
} 

Answer 1

können Sie verwandeln verwenden: Maßstab, sollte dies das Bild machen 75% seine ursprüngliche Größe.

-webkit-transform: scale(0.75); /* Saf3.1+, Chrome */ 
-moz-transform: scale(0.75); /* FF3.5+ */ 
-ms-transform: scale(0.75); /* IE9 */ 
-o-transform: scale(0.75); /* Opera 10.5+ */ 
transform: scale(0.75); 

#disp{ 
 
    margin-top:-17.9px; 
 
    width: 100%; 
 
} 
 

 
#disp img{  
 
    -webkit-transform: scale(1, 0.75); /* Saf3.1+, Chrome */ 
 
    -moz-transform: scale(1, 0.75); /* FF3.5+ */ 
 
    -ms-transform: scale(1, 0.75); /* IE9 */ 
 
    -o-transform: scale(1, 0.75); /* Opera 10.5+ */ 
 
    transform: scale(1,0.75); 
 
    width:100%; 
 
}

<div id="disp"> 
 
       <a href="google.com"><img src="http://wowslider.com/sliders/ 
 
demo-10/data/images/dock.jpg"></a> 
 
      </div>