画像を上半分だけ表示したい

Question

前提・実現したいこと

画像を上半分だけ表示したい
高さも画像の半分にしたい

発生している問題・エラーメッセージ　

上半分だけにするにはどうすればいいかわからない

該当のソースコード

<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous">

<div class="container">
    <div class="row">
        <div class="col">
            <div class="card img-thumbnail">
                <img src="https://unsplash.it/100/150?random">
                <div class="card-body px-2 py-3">
                    <h5 class="card-title">タイトル</h5>
                    <p class="card-text">コンテンツ コンテンツ コンテンツ コンテンツ</p>
                    <p class="mb-0"><a href="#" class="btn btn-primary btn-sm">ボタン</a> <a href="#" class="btn btn-secondary btn-sm">ボタン</a></p>
                </div>
            </div>
        </div>
        <div class="col">
            <div class="card img-thumbnail">
                <img src="https://unsplash.it/200/400?random">
                <div class="card-body px-2 py-3">
                    <h5 class="card-title">タイトル</h5>
                    <p class="card-text">コンテンツ コンテンツ コンテンツ コンテンツ</p>
                    <p class="mb-0"><a href="#" class="btn btn-primary btn-sm">ボタン</a> <a href="#" class="btn btn-secondary btn-sm">ボタン</a></p>
                </div>
            </div>
        </div>
        <div class="col">
            <div class="card img-thumbnail">
                <img src="https://unsplash.it/300/600?random">
                <div class="card-body px-2 py-3">
                    <h5 class="card-title">タイトル</h5>
                    <p class="card-text">コンテンツ コンテンツ コンテンツ コンテンツ</p>
                    <p class="mb-0"><a href="#" class="btn btn-primary btn-sm">ボタン</a> <a href="#" class="btn btn-secondary btn-sm">ボタン</a></p>
                </div>
            </div>
        </div>

    </div>
</div>

試したこと

高さを50%にしましたが画像を上半分にするできませんでした

object-fitを使って

img {
  object-fit: cover;
  object-position: 50% 0;
}

としましたがscreeenサイズによりますが画像は半分になりませんでした

ブラウザーはクロームです

補足情報（FW/ツールのバージョンなど）

ありません

Comments

[s8_chu]

質問者さんの実現したいことをもう少し詳しく教えていただけませんか？

[temmi-com]

すみません。書く直します。

[y_waiwai]

質門は編集できます

[m.ts10806]

やりたいことを書くだけでなく自身で試したことも記載してください(質問テンプレートは原則全項目を埋めましょう)

[s8_chu]

質問者さんの記述したコードを質問文に追記していただけませんか？

[m.ts10806]

提示されたコードは何をどう試した結果でしょうか？
https://teratail.com/help/question-tips#questionTips1-2
また、「画像をimgタグで」なのか「実現できればimgタグでなくても構わない」どちらでしょうか。
具体的に書いてください（2回目ですが、質問テンプレートは原則全項目”自身で”埋めてください）

[temmi-com]

imgタグで実現したいです。

Answer 1

SVGにいれちゃう

test
<svg width="150" height="75"> 
<image xlink:href="https://placehold.jp/ff0000/00ffff/150x150.png?text=123" width="150" height="150" x="0" y="0" alt="123" />
</svg>
test

js

js(jQuery)で自動化したバージョンです

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
<script>
$(function(){
  $('.uehanbun').on('load',function(){
    var w=$(this).prop('width');
    var h=$(this).prop('height');
    var src=$(this).prop('src');
    var img=document.createElementNS('http://www.w3.org/2000/svg','image');
    img.setAttributeNS("http://www.w3.org/1999/xlink", "href",src);
    img.setAttributeNS(null,"width",w);
    img.setAttributeNS(null,"height",h);
    img.setAttributeNS(null,"x","0");
    img.setAttributeNS(null,"y","0");
    var svg=document.createElementNS('http://www.w3.org/2000/svg', 'svg');
    svg.setAttributeNS(null,"width",w);
    svg.setAttributeNS(null,"height",h/2);
    $(this).after($(svg).append(img)).remove();
  });
});
</script>
test
<img src="https://placehold.jp/ff0000/00ffff/150x150.png?text=123" class="uehanbun">
test
<img src="https://placehold.jp/00ff00/ff00ff/200x100.png?text=abc" class="uehanbun">
test

Comments

[temmi-com]

SVGで高さを固定していますがこれは画像ごとに半分の高さを入れないといけないということでしょうか？

[yambejp]

そうですね、でもスクリプトで処理すれば任意に指定しなくても
できそうな気はします

[temmi-com]

cssで行うは難しくjavascriptで処理する必要があるのですね。

[yambejp]

追記しておきました
クラス=uehanbunを入れておけば自動でコンバートしてくれます

Answer 2

ほとんど丸投げなのでヒント回答のみです。

IEで効かないかもしれませんが、下記試してみては。

• object-fit

• 1行追加でOK！CSSだけで画像をトリミングできる「object-fit」プロパティー

Comments

[temmi-com]

やり方がわかりません。object-fitをどうすればいいですか？

[m.ts10806]

回答に提示した１つ目のリンクはobject-fitの仕様です。「こういう指定をすればこういうことができる」が書いてあります。
回答に提示した２つ目のリンクはobject-fitを使った検証記事です。「やり方の例」です。
まずはそれをヒントに色々やってみてください。
もし「トリミング」の意味が分からなければそれは単なる用語です。調べればすぐ出てきます。
※object-fitも調べて出てきたものです

[temmi-com]

object-fitのトリミングを試してみましたが画像を思うようにトリミングできません。
どうすればいいでしょうか・・・。

[m.ts10806]

どのようなコード、結果になったのでしょうか。コードと画面キャプチャ、あと確認したブラウザを質問本文に追記してください。
object-positionなどで調整する必要はありそうです。

[temmi-com]

キャプチャがわからないのでjsfiddlerにアップしました。
https://jsfiddle.net/uyp0zmsa/

[m.ts10806]

「スクリーンショット」と言った方が分かりますでしょうか
WindowsではPrintScreenですね

[temmi-com]

スクリーンショットのことでしたかわかりました。
画像のアップに時間がかかりそうなのですが現在で何かアドバイスが頂けたらぜひお願いしたいです。

[m.ts10806]

jsfiddler見ましたが、上半分だけ出てるような。
表現があまり具体的でないと「人の感覚」に依存してしまうので、
結果を図示されたほうが良いかもしれません。

[temmi-com]

画像をアップできました。画像のように同じ画像でも半分で切られる位置が違うので半分になっていないと思いました。
これは半分になっているのでしょうか？

[m.ts10806]

.img-thumbnail の指定が効いていて画像がレスポンシブになっているからかと思います。
なので「50%」としていても画面幅に依存します。

[temmi-com]

画面幅で高さが変わっても画像を半分にしたいのですがobject-fitでできますか？

[m.ts10806]

フレームワークがどこで影響するかという観点では簡単ではないですが、いっそのこと上半分だけの画像を準備されるか、背景画像で対応されては

[temmi-com]

関係ないかと思い省いてましたがホバーされると画像の全体が現われるようになっていて画像そのものを半分だけにするは難しく、背景にすると画像による具体的な高さを持たせられないので断念しています。
どうにかimgとcssでできないでしょうか？他の回答のコメントのようにjavascriptを使うしかないでしょうか？

[m.ts10806]

JavaScriptによる対応は可能とは思います（おそらく簡単ではないです）
上半分だけの画像を準備するのが一番手っ取り早いです。