垂直に縮小画像

Question

私はそれが通常どんなものかの高さを75％にしたいというイメージがあります。私は応答のレイアウトを使用しているので、これは固定ピクセルの高さなどを使用して行うことはできません。これは背景イメージとしては機能しませんので、background-size: 100% 75%;を使用するのと同じ効果があるのだろうかと疑問に思っています。私はちょうどCSSを使用してこれを達成したいと思います。

編集：

例：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

あなたが変換を使用することができます：スケールを、これは画像の75％をしなければなりません元のサイズ。

-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>