CSS grid / grafika wektorowa (?) / img w css

Question

Cześć ! Bardzo podoba mi się efekt , w którym zdjęcie skaluje się w zależności od wielkości strony.

Przykład: https://www.scabal.com/en/

(Zdjęcie Faceta w garniturze)

  <section class="my-projects">
    <h2>Projekty</h2>
    <article class="projects">
      <div><img class="img-project" src="img/mountains-1412683_960_720.png" /></div>
      <div><img class="img-project" src="img/mountains-1412683_960_720.png" /></div>
      <div><img class="img-project" src="img/mountains-1412683_960_720.png" /></div>
      <div><img class="img-project" src="img/mountains-1412683_960_720.png" /></div>
    </article>
  </section>

.my-projects .projects
{
  display: grid;
  grid-template-columns: 1fr 1fr;
  color: black;
  grid-gap: 5px;
  height: 70vh;
  margin-top: 5vh;
}

.my-projects .projects .img
{
  display: grid;
  width: 1fr;
  height: 1fr;
}

 

Chciałbym ,aby tutaj zdjęcia skalowały się w zależności od wielkości 1 frakcji. Kombinowałem i wychodzi mi jedynie na %,px :/

Bardzo prosiłbym tylko o odpowiedzi na pytanie :)

Answer 1

Użyta technika to przełączanie rozdzielczośći w zależnośći od rozmiaru za pomocą atrybutów srcset i size

Comments

Będę bardzo wdzięczny :) Znaczy wiesz co do praktyki co jest wskazane ,a co nie to można się rozwodzić godzinami :D

---

i jak?

Height się nie dostosowuje

---

Jednak sam zrobiłem :) Tylko trochę po januszowemu:
 

.my-projects .projects .img-project
{
  max-width: 100%;
  height: 35vh;
}

To 35vh jest obliczne , jak masz coś lepszego do zaproponowania chętnie skorzystam :D

---

ustawienie height: 70vh; w klasie .projects jest zbędne, ponieważ wysokość będzie brana z img, Gdy obrazek się zmniejsz wyskość zostaje na sztywno 70vh dlatego jest przerwa.

---

Dzięki :) Daje naj