background-image - obraz który się nie rozciąga

Question

Witam, chciałbym uzyskać efekt diva z jakimś obrazem na tle, który wraz ze zmniejszaniem się ekranu nie będzie się rozciągał. Zamiast tego wolałbym żeby zachował stosunki długości boków i żeby  w razie konieczności jego część była poza ekranem. Jednocześnie chciałbym zachować właściwość background-repeat: no-repeat; Dokładnie taki efekt spotkałem na stronie speedcar na stronie głównej tuż pod navbarem. Czy jest jakiś prosty sposób na uzyskanie takiego efektu?

Answer 1

Wejdź sobie w devtools ja używam (firefox) i dobrze rozłóż przykładową stronę na czynniki pierwsze !

są tam trzy kluczowe własciwości dla zdjęć (slider)

background-size: cover;
background-position: 50%;
background-repeat: no-repeat;

Najważniejsza z nich to :

background-size: cover;

https://css-tricks.com/almanac/properties/b/background-size/

Powodzenia i Pozdrawiam Serdecznie !

Comments

Bardzo dziękuję. Próbowałem znaleźć coś ciekawego w kodzie strony, ale nie udało mi się. Następnym razem będę dokładniej szukał.

---

Spoko Nie ma sprawy. Devtools to naprawdę potężne narzędzie dobrze jest się nauczyć z niego korzystać ... to później procentuje ..

Answer 2

Moja propozycja. 

<div class="wrap">
  <div class="slide"></div>
</div>

*, *::after, *::before {
  -webkit-box-sizing: border-box;
  -moz-box-sizing: border-box;
  box-sizing: border-box;
}
:root {
  --viewport_100_percent: 100vw;
}
html, body {
  margin: 0;
  padding: 0;
  overflow-x: hidden; 
}
.wrap {
  width: var(--viewport_100_percent);
  height: 400px;
  overflow-x: hidden;  
  box-shadow: 2px 0px 5px 2px rgba(0,0,0,0.80);
}
.slide {
  min-width: var(--viewport_100_percent);
  min-height: 100%;
  padding: 0;
  background-image: url(https://source.unsplash.com/2000x401);
  background-size: cover;
  background-repeat: no-repeat;
}

 

Comments

Wow, dzięki za rozbudowaną odpowiedź. Na szczęście po dodaniu background-size: cover; uzyskałem już efekt, który chciałem uzyskać.