CSSで模写を作っていて解決できないことがあります。

Question

模写を作ってCSSを練習していますが、自力で解決できないことがあるので質問です。添付した画像の内容を作成しています。

どこで詰まっているかというと家の画像が貼られている画像と白枠の調整です。
幅もそうですが、高さが下のコーディングだとものすごく大きくなります。

検証ツールで実際のサイトを見ましたが、結局よくわからずここにきてしまいました。
どなたかアドバイスいただけませんでしょうか。
模写元のサイトは下記です。
https://www.maruni-web.com/

	
<!--worksエリア-->
<section class="works-area">
	<div class="works-wrapper">
		
		<div class="works-text">
			<p class="midashi-text white-text">Works</p>
			<p class="button-type-b">事例紹介一覧</p>
		</div>

		<div class="works-home-area display-flex">
				<div class="image-block">
					<img src="maruni-image/1575102187.jpg" alt="夜の家の画像" class="works-image">
				</div>

				<div>
					<p>三共アルミ ファサードエクステリア アルミス</p>
					<p class="button-type-a">事例紹介</p>
				</div>
		</div>
	</div>
</section>
<!--worksエリア-->	
コード

/*worksエリア*/
.works-area{
	background-color: #6F8D83;;
	box-sizing: border-box;
}
	.works-wrapper{
		padding: 70px 15px 100px;
	}

		.works-text{
			text-align: center;
		}
		.works-home-area{
			background-color: #fff;
			width: 100%;
			margin: 0 auto;
			    padding: 15px;
		}
		.image-block{
			width: 65%;
		}
		.works-image{
			
		}
/*/worksエリア*/
コード

Answer 1

模写されようとしているサイトを見てみましたが、「高さがすごく大きくなる」の「高さ」というのは、HTMLのコードから、表示される画像の高さの事を仰っていると推測して回答します。

模写されようとしているサイトでは写真の一部を表示するという方法を使われています。
いくつか方法はあると思いますが、画像の要素( <img> ) と、それの親要素( <div> など)を用意してあげて、親要素に overflow: hidden; と、表示する幅と高さを設定して、親要素には position: relative; を子要素に position: absolute; を設定して場所を調整してあげるのがシンプルかなと思います。

以下、画像の要素に child クラス、親要素に parent クラスを設定した例を記載します。
参考になりましたら幸いです。

.parent {
  position: relative;
  overflow: hidden;
  width: 800px; /* 表示したい幅 */
  height: 450px; /* 表示したい高さ */
}

.child {
  position: absolute;
  /* 以下どう表示したいか調整 */
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  margin: auto; /* この場合中央揃えになります */
}

Answer 2

imgにmax-widthが設定されていて、それで画像のサイズが調整されているので、それを包含する要素のサイズも小さくなっているんじゃないでしょうか

Comments

[退会済みユーザー]

解決できました。ありがとうございました。