Skalowalne obrazy w grid

0

Witam,
Rozmieściłem obrazy img w siatce grid.
Chciałbym uzyskać efekt skalowania obrazów wraz ze zmianą rozmoaru okna.
Obecnie obrazy pozostają tej samej wielkości, a gdy okno jest za małe część obrazów jest ucinana, lub wychodzi poza ekran.

Jak uzyskać efekt zmiany rozmiaru obrazów wraz ze zmianą wielkości okna?

4

Daj obrazkom kontener z wysokością i szerokością 100% samemu IMG także. Potem temu IMG dodaj object-fit:cover;.

0
katakrowa napisał(a):

Daj obrazkom kontener z wysokością i szerokością 100% samemu IMG także. Potem temu IMG dodaj object-fit:cover;.

W tej sytuacji obraz może się powiększać, natomiast nadal nie zmniejsza się

.layout_main .sent_price {
  grid-area: sent_price;
  width: 100%;
}

.layout_main .sent_price img {
  width: 100%;
  object-fit: cover;
}
0

Szerokość kolumn w grid określam procentowo

.layout_main {
  display: grid;
  grid-template-columns: 33% 33% 33%;
  gap: 35px;
  grid-template-rows: 12% 11% 32% 1fr;
  }
0

Napisałem: wysokością i szerokością 100%.
Z drugiej strony nie każ nam wróżyć tylko wrzuć cały kod, który za to odpowiada.

0 
/* & MAIN */

.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;
}

 <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="images/blocks/sent_price.svg" alt=""></div>
                <div class="active_users"><img src="images/blocks/active_users.svg" alt=""></div>
                <div class="trending_nft"><img src="images/blocks/trending_nft.svg" alt=""></div>
                <div class="usd"><img src="images/blocks/usd.svg" alt=""></div>

                <div class="activity"><img src="images/blocks/activity.svg" alt=""></div>

                <div class="usdc_paid"><img src="images/blocks/usdc_paid.svg" alt=""></div>
            </div>
1

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:

  1. https://developer.mozilla.org/en-US/docs/Web/CSS/object-fit
  2. 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ś.

screenshot-20220927121613.png

<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>

1 użytkowników online, w tym zalogowanych: 0, gości: 1