Punkty fokalne w obrazach elastycznych

Ustawienie punktu fokalnego pozwala zapobiec przycięciu kluczowej części obrazu. Ma to szczególne znaczenie w przypadku układów elastycznych, gdy ten sam obraz może wyświetlać się w różnych rozmiarach.

Punkty fokalne

Punkty fokalne w obrazach tła

Punkt fokalny warto ustawić wtedy, gdy używasz obrazu jako tła. Ustaw szerokość i wysokość obrazu na 100%, a potem określ punkt fokalny, by mieć pewność, że najważniejsza część obrazu będzie zawsze widoczna, niezależnie od rozmiaru elementu.

Ograniczenia dostępności punktu fokalnego:

  • Typ skalowania obrazu – właściwość Skalowanie musi być ustawiona na Przytnij obraz, by wypełnić lub Brak.
  • Typ źródła obrazu – źródłem musi być lokalny (a nie zewnętrzny) URL.
  • Reklamy dynamiczne – nie obsługują punktów fokalnych.
  • Animacja – punkty fokalne nie mogą być animowane. Jeśli animujesz wymiary obrazu, ustawiony dla niego punkt fokalny będzie odnosić się do jego rozmiaru początkowego.

Włączenie punktu fokalnego powoduje zastąpienie opcji wyrównania.

Ustawianie punktu fokalnego

  1. Otwórz okno Edytuj punkt fokalny obrazu na jeden z tych sposobów:
    • Wybierz obraz na scenie, a potem kliknij pole Włącz punkt fokalny w panelu Właściwości.
    • Kliknij obraz prawym przyciskiem myszy i wybierz Ustaw punkt fokalny... z menu.
  2. Przeciągnij punkt fokalny w wybrane miejsce.
    • Domyślnie jest on ustawiany w środku obrazu.
    • Element sterujący punktem fokalnym ma postać białego okręgu, by łatwo dało się go dostrzec i kliknąć. Właściwy punkt fokalny wskazuje krzyżyk celownika znajdujący się w środku.
    • Użyj klawiszy strzałek na klawiaturze, by przesuwać punkt fokalny o jeden piksel.
    • Punkt fokalny możesz zresetować, by powrócił na środek. Aby to zrobić, kliknij obraz prawym przyciskiem myszy, a następnie wybierz Resetuj z menu. Możesz też nacisnąć Ctrl+R (Windows) lub +R (Mac).
  3. Przejdź na kartę Podgląd, by zobaczyć, jak punkt fokalny wpływa na przycinanie obrazu w zależności od różnych współczynników proporcji.
  4. Kliknij OK.

Jeśli zmienisz źródło obrazu, Google Web Designer zapyta, czy chcesz zachować, zmienić lub usunąć punkt fokalny.

Edytowanie punktu fokalnego

W razie potrzeby możesz zmienić pozycję istniejącego punktu fokalnego:

  1. Otwórz okno Edytuj punkt fokalny obrazu na jeden z tych sposobów:
    • Kliknij obraz prawym przyciskiem myszy i wybierz Edytuj punkt fokalny... z menu.
    • Wybierz obraz i kliknij przycisk Ustaw pozycję punktu fokalnego  obok pola Włącz punkt fokalny w panelu Właściwości.
  2. Przeciągnij punkt fokalny w nowe miejsce.
  3. Kliknij OK.

Włączanie i wyłączanie punktu fokalnego

Punkt fokalny możesz wyłączyć, by zobaczyć, jak obraz wygląda po zastosowaniu opcji wyrównania. Jeśli ponownie włączysz punkt fokalny, Web Designer będzie pamiętać jego wcześniejsze położenie.

Aby włączyć lub wyłączyć punkt fokalny wybranego obrazu, skorzystaj z jednego z tych sposobów:

  • Kliknij pole Włącz punkt fokalny w panelu Właściwości.
  • Kliknij obraz prawym przyciskiem myszy i z menu wybierz Włącz punkt fokalny lub Wyłącz punkt fokalny.

Usuwanie punktu fokalnego

  1. Kliknij obraz prawym przyciskiem myszy.
  2. Z menu wybierz Usuń punkt fokalny.

Zamienianie obrazu z punktem fokalnym

Po użyciu funkcji Zamień obraz... lub zmianie źródła obrazu z włączonym punktem fokalnym możesz określić, czy dla nowego obrazu chcesz zachować ten sam punkt fokalny, zmienić go lub usunąć.

Punkty fokalne i reguły multimediów

Nie można zmienić pozycji punktu fokalnego za pomocą reguł multimediów. Jeśli chcesz wyświetlać różne obrazy w zależności od rozmiaru widocznego obszaru, ale obrazy nie mogą korzystać z tego samego punktu fokalnego, możesz uwzględnić oba obrazy w dokumencie, a następnie za pomocą reguł multimediów zmienić nieprzezroczystość każdego obrazu w przypadku rozmiarów, w których nie powinien być on widoczny, na wartość 0.

Punkty fokalne w widoku kodu

W widoku kodu współrzędne punktu fokalnego są określone w atrybucie focalpoint elementu gwd-image. Przykład:

<gwd-image class="gwd-image-1t0s" id="gwd-image_1" scaling="none" source="assets/moon_landscape.jpg" focalpoint="540 295"></gwd-image>

Czy to było pomocne?

Jak możemy ją poprawić?
Szukaj
Wyczyść wyszukiwanie
Zamknij wyszukiwanie
Menu główne
8507673870788836293
true
Wyszukaj w Centrum pomocy
true
true
true
true
true
5050422
false
false