Ale żeś tu "nabazgrał"...
Widać, że działasz metodą kopiuj wklej i oczekujesz cudownego zadziałania po Twojej myśli. Może zacznij od podstaw i poczytaj o tym jak można osadzić obrazek na stronie WWW, zaczynając od:
-
https://developer.mozilla.org/en-US/docs/Web/CSS/object-fit
-
https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Grid_Layout
Szczerze mówiąc nie mam pojęcia co chcesz osiągnąć. Z CSS tylko jeden obrazek skalujesz do wielkości kontenera i tak też to działa...
Wszystko się dzieje dokładnie tak jak to zaprogramowałeś.
<html>
<body>
<style>
.layout_main {
grid-area: main;
display: grid;
grid-template-columns: 33% 33% 33%;
gap: 35px;
grid-template-rows: 12% 11% 32% 1fr;
grid-template-areas:
"header header header"
"sent_price active_users trending_nft"
"usd usd trending_nft"
"activity activity usdc_paid";
}
.layout_main .sent_price {
grid-area: sent_price;
width: 100%;
height: 100%;
}
.layout_main .sent_price img {
width: 100%;
height: 100%;
object-fit: cover;
}
.layout_main .active_users {
grid-area: active_users;
}
.layout_main .trending_nft {
grid-area: trending_nft;
}
.layout_main .usd {
grid-area: usd;
padding-left: 50px;
}
.layout_main .activity {
grid-area: activity;
padding-left: 50px;
}
.layout_main .usdc_paid {
grid-area: usdc_paid;
}
</style>
<div class="layout_main">
<div class="layout_header">
<span class="title">Dashboard</span>
<a class="btn" href=""> Connect Wallet</a>
</div>
<div class="sent_price"><img src="https://fujifilm-x.com/wp-content/uploads/2019/08/x-t30_sample-images03.jpg" alt=""></div>
<div class="active_users"><img src="https://fujifilm-x.com/wp-content/uploads/2019/08/x-t30_sample-images03.jpg" alt=""></div>
<div class="trending_nft"><img src="https://fujifilm-x.com/wp-content/uploads/2019/08/x-t30_sample-images03.jpg" alt=""></div>
<div class="usd"><img src="https://fujifilm-x.com/wp-content/uploads/2019/08/x-t30_sample-images03.jpg" alt=""></div>
<div class="activity"><img src="https://fujifilm-x.com/wp-content/uploads/2019/08/x-t30_sample-images03.jpg" alt=""></div>
<div class="usdc_paid"><img src="https://fujifilm-x.com/wp-content/uploads/2019/08/x-t30_sample-images03.jpg" alt=""></div>
</div>
</body>
</html>