異なる画像のサイズを揃える

前提・実現したいこと

サイズが異なる画像の幅と高さを模写サイト通りに揃えたいです。
模写サイトでは２つの画像の元のサイズが一緒ですが、私は異なるサイズの画像を使用しております。
親要素にはwidth:48%;,imgタグにwidth:100%;,height:auto;を指定しておりますが、このような場合は、画像のサイズを統一するか、heightを模写サイトに無理やり合わせるしかないのでしょうか？

※補足情報
模写サイトの画像サイズ
【width:1200px;,height:614px;】

自分が使用している画像サイズ
service.jpeg【width:1650px;,height:1100px;】

service.jpeg1【width:2000px;,height:1250px;】

模写サイトでは画面幅1180px〜の時画像サイズ【width:547.19px;height:279.97px】
です。

画像はフリー素材サイトからダウンロードしました。

該当のソースコード

HTML
1<!DOCTYPE html>
2<html lang="en">
3<head>
4    <meta charset="UTF-8">
5    <meta name="viewport" content="width=device-width, initial-scale=1.0">
6    <link rel="stylesheet" href="style.css">
7    <title>Document</title>
8</head>
9<body>
10<section class="service">
11<h2 class="sec-tit">Service</h2>
12<div class="service-inner">
13<div class="service-box">
14<img src="img/service.jpeg">
15<div class="service-info">
16<p class="service-txt">Service</p>
17<p class="service-txts">service.service.service.service.service.service.service.service.service.</p>
18</div>
19</div>
20<div class="service-box service-boxs">
21<img src="img/service1.jpeg">
22<div class="service-info">
23<p class="service-txt">Service</p>
24<p class="service-txts">service.service.service.service.service.service.service.service.service.</p>
25</div>
26</div>
27</div>
28<div class="btn">
29<a href="" class="btn-txt">SERVICE</a>
30</div>
31</section>
32</body>
33</html>

CSS
1.sec-tit {
2    font-size: 38px;
3    margin: 10px 0 70px;
4    letter-spacing: 2px;
5    font-weight: 800;
6    text-align: center;
7    position: relative;
8    line-height: 1;
9  }
10  
11  .sec-tit::before {
12    content: '';
13    position: absolute;
14    bottom: -22px;
15    display: inline-block;
16    width: 60px;
17    height: 5px;
18    left: 50%;
19    transform: translateX(-50%);
20    background-color: #d7e401;
21    border-radius: 2px;
22  }
23  
24.service {
25    background: #f3f3f3;
26    padding: 40px 0;
27    width: 100%;
28    position: relative;
29  }
30  
31  .service-inner {
32    display: flex;
33    justify-content: center;
34    margin: 0 auto;
35    max-width: 1140px;
36  }
37  
38  .service-boxs {
39    margin-left: 3.5%;
40  }
41  
42  .service-box {
43    width: 48%;
44  }
45  
46  .service-box img {
47    width: 100%;
48    height: 279.97px;
49    object-fit: cover;
50    display: block;
51  }
52  
53  .service-info {
54    background: #fff;
55    padding: 20px 20px 20px 30px;
56  }
57
58  .service-txt {
59    font-weight: 600;
60    line-height: 1.4;
61    letter-spacing: 1px;
62    font-size: 18px;
63  }
64  
65  .service-txts {
66    line-height: 1.5;
67    font-size: 1.6px;
68  }
69  
70  .btn {
71    text-align: center;
72    border: solid 2px #000;
73    max-width: 270px;
74    width: 100%;
75    box-sizing: border-box;
76    margin: auto;
77    padding: 14px 0;
78    font-size: 15px;
79    line-height: 1;
80    margin-top: 16px;
81    margin-bottom: 20px;
82  }
83  
84  .btn-txt {
85    text-decoration: none;
86    color: #181818;
87  }
88

試したこと

.service-boxにheight:48%;　.service-box imgにheight:100%;を指定。
→効果なし
その他様々なサイトを閲覧しましたが、この問題を解決するに至りませんでした。

初心者のとても未熟な質問ですが、
どなたかご教授いただければ幸いです。

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

回答2件

ベストアンサー

それぞれの画像の縦横比（アスペクト比）が異なります。

模写サイト 614px ÷ 1200px ≒ 0.5117
画像1　1100px ÷ 1650px ≒ 0.6667
画像2　1250px ÷ 2000px ≒ 0.625

模写サイトのアスペクト比に合わせればいいのでしょうか。

まず、画像(imgタグ)をdivタグ(img-boxクラス)で囲みます。

html
1<div class="service-box">
2  <div class="img-box">
3    <img src="img/service.jpeg">
4  </div>
5  <div class="service-info">
6    <p class="service-txt">Service</p>
7    <p class="service-txts">service.service.service.service.service.service.service.service.service.</p>
8  </div>
9</div>

.img-boxボックスのアスペクト比を padding-top で固定します。
画像をこのボックスのサイズに合わせます。

css
1.service-box {
2  width: 48%;
3}
4.img-box {
5  width: 100%;
6  padding-top: 51.17%;
7  position: relative;
8}
9.service-box img {
10  width: 100%;
11  height: 100%;
12  object-fit: cover;
13  position: absolute;
14  top: 0;
15}