CSS - レスポンシブ画像のパーセンテージのみを表示する

Question

画像のパーセンテージのみを表示したい（例えば、上半分）が、レスポンス的に表示され、ビューポートのサイズ変更が画像のどの部分に影響を与えないようにしたい示されています。

JSFiddle attempt

私が見つけた唯一の解決策は、画像（たとえば、200pxの）ではなく％の年齢のための固定の高さを使用することに依存しているが、これは応答しません。ビューポートを縮小するにつれて、画像全体が最終的に見えるようになるまで、画像のより多くの部分が表示されます。

---

注：マイJSFiddleたとえば以下のCSSプロパティを追加し、ブートストラップクラスimg-responsiveを、使用している：

display: block 
max-width: 100%; 
height: auto 

ます。またJSFiddleの中央デバイダ/ハンドルバーをつかむと、にそれを周りに移動することができます画像への影響を参照してください。

---

私の要件を満たすためには何ができますか？ JavaScriptとIE9までのブラウザサポートがなければ可能ですか？

Answer 1

たぶん、このような

body { 
 
    background: gray; 
 
} 
 
div { 
 
    display: inline-block; 
 
    overflow: hidden; 
 
} 
 
div img { 
 
    position: relative; 
 
    margin-top: -50%; 
 
    transform: translateY(50%); 
 
}

<div> 
 
    <img class="img-responsive" src="http://icons.iconarchive.com/icons/mazenl77/I-like-buttons-3a/512/Cute-Ball-Go-icon.png" class="img-responsive" /> 
 
</div>

Answer 2

position：absoluteに加えて、擬似要素：afterを使用することができます。

div:after { 
    content: ""; 
    position: absolute; 
    height: 50%; 
    width: 100%; 
    top: 0; 
    left: 0; 
    background-color: #ffffff 
} 

フィドル：ここhttps://jsfiddle.net/qse2LL4b/3/

Answer 3

、私はあなたのために一緒にこれを投げた：https://jsfiddle.net/qse2LL4b/4/

function showPart(img, offsetTop, offsetLeft, width, height){ 
    var src = img.src; 
    $(img).replaceWith("<canvas id='cnvs' style='max-width:100%;'></canvas>"); 
    var canvas = document.getElementById('cnvs'); 
    canvas.height = height; 
    canvas.width = width; 
    var ctx = canvas.getContext("2d"); 
    var img = new Image(); 
    img.onload = function(){ 
    ctx.drawImage(this, offsetLeft, offsetTop, width, height, 0, 0, width, height); 
    }; 
    img.src = src; 
} 

それはあなたのイメージのソースを取り、それをトリミングし、それに取って代わります。必要に応じて、関数内の "canvas"要素にim-responsiveクラスを追加できます。