Mam stronę internetową (g-floors.eu) i chcę, aby tło (w css zdefiniowałem obraz bg dla treści) również było responsywne. Niestety tak naprawdę nie mam pojęcia, jak to zrobić, z wyjątkiem jednej rzeczy, o której mogę myśleć, ale jest to całkiem obejście. Tworzenie wielu obrazów, a następnie używanie rozmiaru ekranu css do zmiany obrazów, ale chcę wiedzieć, czy istnieje bardziej praktyczny sposób, aby to osiągnąć.
Zasadniczo chcę osiągnąć to, aby obraz (ze znakiem wodnym „G”) automatycznie zmieniał rozmiar bez wyświetlania mniejszej ilości obrazu. Jeśli to możliwe, oczywiście
link: g-floors.eu
Kod, który mam do tej pory (część zawartości)
#content {
background-image: url('../images/bg.png');
background-repeat: no-repeat;
position: relative;
width: 85%;
height: 610px;
margin-left: auto;
margin-right: auto;
}
Odpowiedzi:
Jeśli chcesz skalować ten sam obraz na podstawie rozmiaru okna przeglądarki:
Nie ustawiaj szerokości, wysokości ani marginesów.
EDYCJA: Poprzedni wiersz o braku ustawiania szerokości, wysokości lub marginesu odnosi się do pierwotnego pytania OP dotyczącego skalowania z rozmiarem okna. W innych przypadkach użytkowania możesz w razie potrzeby ustawić szerokość / wysokość / marginesy.
źródło
div
uzyskają własną wysokość z własnej zawartości lub zajmują dostępną przestrzeń w modelu Flexbox. Mówienie, że bez wyraźnej szerokości / wysokości kontener w ogóle się nie pokaże, jest niepoprawne. Oczywiście, jeśli chcesz wyświetlić pusty div z obrazem tła, będziesz musiał ustawić wysokość i ewentualnie szerokość, ale wtedy zobaczysz tylko część obrazu, chyba że proporcje są dokładnie takie same jak sam obraz.za pomocą tego kodu obraz tła przechodzi do środka i naprawia rozmiar niezależnie od zmiany rozmiaru div, dobry dla małych, dużych, normalnych rozmiarów, najlepszy dla wszystkich, używam go do moich projektów, w których mój rozmiar tła lub rozmiar div może się zmienić
źródło
Spróbuj tego :
źródło
CSS:
To powinno wystarczyć! :)
źródło
Oto sass mixin dla responsywnego obrazu tła, którego używam. Działa dla każdego
block
elementu. Oczywiście to samo może działać w zwykłym CSS, wystarczy obliczyćpadding
ręcznie.Przykład http://jsfiddle.net/XbEdW/1/
źródło
To jest łatwe =)
Spójrz na demo jsFiddle
źródło
Oto najlepszy sposób, jaki mam.
Sprawdź w w3schools
Więcej dostępnych opcji
źródło
użyłem
co działało naprawdę dobrze.
źródło
źródło
Responsywna strona internetowa, dodając dopełnienie do dolnej krawędzi obrazu wysokość / szerokość x 100 = dopełnienie-dół%:
http://www.outsidethebracket.com/responsive-web-design-fluid-background-images/
Bardziej skomplikowana metoda:
http://voormedia.com/blog/2012/11/responsive-background-images-with-fixed-or-fluid-aspect-ratios
Spróbuj zmienić rozmiar tła eq Firefox Ctrl + M, aby zobaczyć magiczny fajny skrypt, moim zdaniem najlepszy:
http://www.minimit.com/demos/fullscreen-backgrounds-with-centered-content
źródło
Możesz tego użyć. Przetestowałem i działa w 100% poprawnie:
Możesz przetestować swoją stronę internetową z responsywnością w tym Symulatorze rozmiaru ekranu: http://www.infobyip.com/testwebsiteresolution.php
Wyczyść pamięć podręczną za każdym razem, gdy wprowadzasz zmiany, a ja wolę używać Firefoxa do jej testowania.
Jeśli chcesz użyć obrazu z innej witryny / adresu URL, a nie jak:
background-image:url('../images/bg.png');
// Ta struktura służy do korzystania z obrazu z własnego hostowanego serwera. Następnie użyj takiego:background-image: url(http://173.254.28.15/~brettedm/wp-content/uploads/Brett-Edmonds-Photography-14.jpg) ;
Cieszyć się :)
źródło
Jeśli chcesz, aby cały obraz wyświetlał się niezależnie od proporcji, spróbuj tego:
Spowoduje to wyświetlenie całego obrazu bez względu na rozmiar ekranu.
źródło
źródło
Tylko dwa wiersze kodu, to działa.
źródło
Dostosowujący się do stosunku kwadratowego z jQuery
źródło
lub
źródło
Myślę, że najlepszym sposobem na to jest:
W ten sposób nie trzeba nic więcej robić i jest to dość proste.
Przynajmniej działa dla mnie.
Mam nadzieję, że to pomoże.
źródło
Spróbuj użyć,
background-size
ale używając DWÓCH ARGUMENTÓW. Jeden dla szerokości, a drugi dla wysokościźródło
Właściwość position może być używana do wyrównywania górnego dołu i środka zgodnie z potrzebami, a tła można używać do przycinania środka (okładki) lub pełnego obrazu (zawierającego lub 100%)
źródło