imgの表示について

Bootstrap4で画像をimg-fruidで表示してみたのですが、、、

スマートフォン表示にした時のみ、上画像の黒枠の部分の表示にしたいです。
実現するためには、別の大きさの写真を用意しなければいけないのでしょうか？
コードは以下のとうり

HTML
1 <div class="container ojisann">
2            <div class="row">
3              <div class="col-md-6">
4                <img src="img/8e6c68cc-e714-4849-bad9-464abf58e84a.jpg" class="img-fluid">
5
6              </div>
7              <div class="col-md-6 tenntenn">
8                <h4 class="display-4 text-warning mt-2 icon">“</h4>
9                <p class="lead">「ホスト保証」があったからAirbnb参加を決めたといっても過言でないほどで、被害やトラブルがあったときに頼れるサポートがあるのは本当にありがたいですね。</p>
10                <p class="text-muted">Dennisさんはロンドンのホスト。自由度の高さに魅力を感じています</p>
11                <a href="" class="btn btn-outline-dark font-weight-bold mb-5 px-3 py-2">ホスト実践例をチェック</a>
12
13              </div>
14            </div>
15          </div>

CSS
1.ojisann{
2  margin-top:100px;
3}
4
5.icon{
6  margin-bottom:-30px;
7}
8
9.tenntenn p{
10  line-height:2.1rem;
11}

行動規範の内容に同意します

回答2件

黒枠の要素に、overflow: hidden;を指定するとOKではないかと思います。

CSS
1黒枠の要素 {
2  overflow: hidden;
3}

別方法で、「object-fit: cover;」の方法でも実現できそうでした。

CSS
1.xxxx {
2  width: 200px;
3  height: 200px;
4}
5.xxxx img {
6  height: 100%;
7  width: 100%;
8  display: block;
9  object-fit: cover; /* こちらが重要 */
10}