de-vraag
Więcej
Question

Responsywne obrazy tła css

Mam stronę (g-floors.eu) i chciałbym, aby tło (w css mam zdefiniowane bg-image dla treści) było również responsywne. Niestety nie mam żadnego pomysłu jak to zrobić, poza jedną rzeczą, która przychodzi mi do głowy, ale jest to dość skomplikowane obejście. Tworzenie wielu obrazów, a następnie używanie rozmiaru ekranu css do zmiany obrazów, ale chciałbym wiedzieć, czy istnieje bardziej praktyczny sposób, aby to osiągnąć.

Zasadniczo co chcę osiągnąć jest to, że obraz (ze znakiem wodnym 'G') automatycznie zmienia rozmiar bez wyświetlania mniej obrazu. Jeśli to'jest możliwe, oczywiście

link: g-floors.eu

Kod, który mam do tej pory (część merytoryczna)

#content {
  background-image: url('../images/bg.png');
  background-repeat: no-repeat;
  position: relative;
  width: 85%;
  height: 610px;
  margin-left: auto;
  margin-right: auto;
}
Mosh Feu
Mosh Feu
Edytowane pytanie 8. października 2018 в 10:14
Programowanie
css
responsive-design
background-image
image-resizing
To pytanie ma 1 odpowiedź w języku angielskim, aby je przeczytać zaloguj się na swoje konto.
Solution / Answer

Jeśli chcesz, aby ten sam obraz był skalowany w zależności od rozmiaru okna przeglądarki:

background-image:url('../images/bg.png');
background-repeat:no-repeat;
background-size:contain;
background-position:center;

Nie ustawiaj szerokości, wysokości ani marginesów.

EDIT: Poprzednia linia o nie ustawianiu szerokości, wysokości lub marginesu odnosi się do oryginalnego pytania OP's o skalowanie z rozmiarem okna. W innych przypadkach użycia, możesz chcieć ustawić szerokość/wysokość/marginesy, jeśli to konieczne.

Andrei Volgin
Andrei Volgin
Edytowana odpowiedź 22. listopada 2018 в 2:43
353

CSS:

background-size: 100%;

To powinno załatwić sprawę! :)

Timothy Miller
Timothy Miller
Edytowana odpowiedź 30. sierpnia 2015 в 6:42
32

Możesz użyć tego. Przetestowałem i działa w 100% poprawnie:

background-image:url('../images/bg.png'); 
background-repeat:no-repeat;
background-size:100%;
background-position:center;

Możesz przetestować swoją witrynę z responsywnością na tym Symulatorze rozmiaru ekranu: http://www.infobyip.com/testwebsiteresolution.php

Wyczyść swoją pamięć podręczną za każdym razem, gdy wprowadzasz zmiany i wolałbym użyć Firefoxa do przetestowania go.

Jeśli chcesz użyć formy obrazu z innej strony/URL, a nie jak: background-image:url('../images/bg.png');. //Ta struktura ma na celu użycie obrazu z własnego serwera hostowanego. Wtedy należy użyć jak poniżej: background-image: url(http://173.254.28.15/~brettedm/wp-content/uploads/Brett-Edmonds-Photography-14.jpg) ;.

Enjoy :)

4