Duyarlı resimler için odak noktaları

Resmin önemli bir kısmının kırpılmayacağından emin olmak için odak noktasını ayarlayabilirsiniz. Odak noktaları, aynı resmin farklı boyutlarda gösterilebileceği duyarlı düzenler için özellikle yararlıdır.

Odak noktaları

Arka plan resimleri için odak noktaları

Bir resmi arka plan resmi olarak ayarladığınızda, odak noktası yararlı olabilir. Resim genişliğini ve yüksekliğini %100 olarak ayarlayın, ardından öğe boyutundan bağımsız olarak resmin en önemli kısmının her zaman görülebildiğinden emin olmak için bir odak noktası ayarlayın.

Odak noktası kullanılabilirliği ile ilgili sınırlamalar:

  • Resim ölçekleme türü - Ölçekleme özelliği, Resmi sığacak şekilde kırp veya Hiçbiri değerine ayarlanmalıdır.
  • Resim kaynağı türü - Kaynak, harici değil yerel bir URL olmalıdır.
  • Dinamik reklamlar - Odak noktaları dinamik reklamlarda desteklenmez.
  • Animasyon - Odak noktaları animasyonlu olamaz. Resmin boyutlarını canlandırırsanız bu resim için ayarladığınız odak noktası ilk resim boyutunda geçerli olur.

Odak noktasını etkinleştirmek hizalama seçeneklerini geçersiz kılar.

Odak noktası ayarlama

  1. Aşağıdaki yöntemlerden birini kullanarak Resmin odak noktasını düzenle iletişim kutusunu açın.
    • Sahnedeki resmi seçin, ardından Özellikler panelindeki Odak noktasını etkinleştir onay kutusunu tıklayın.
    • Resmi sağ tıklayın ve pop-up menüden Odak noktasını ayarla... seçeneğini belirleyin.
  2. Odak noktasını olmasını istediğiniz yere sürükleyin.
    • Varsayılan olarak odak noktası, resmin ortasıdır.
    • Odak noktası kontrolü, kolay görünmesi ve tıklanması için beyaz bir daire olarak görünür ancak ortadaki artı işareti gerçek odak noktasını belirtir.
    • Odak noktasını her seferinde bir piksel taşımak için klavyenin ok tuşlarını kullanın.
    • Resmi sağ tıklayıp pop-up menüden Sıfırla'yı seçerek ya da Ctrl+R (Windows) veya +R (Mac) tuşlarına basarak, odak noktasını ortaya sıfırlayabilirsiniz.
  3. Odak noktasının farklı resim en boy oranlarında resim kırpmasını nasıl etkilediğini görmek için Önizleme sekmesine geçebilirsiniz.
  4. Tamam'ı tıklayın.

Görüntü kaynağını değiştirdiğinizde, Google Web Designer, odak noktasını tutmak, düzenlemek veya silmek isteyip istemediğinizi sorar.

Odak noktası düzenleme

Mevcut bir odak noktasının konumunu değiştirebilirsiniz:

  1. Aşağıdaki yöntemlerden birini kullanarak Resmin odak noktasını düzenle iletişim kutusunu açın:
    • Resmi sağ tıklayın pop-up menüden Odak noktasını düzenle... seçeneğini belirleyin.
    • Resmi seçin, ardından Özellikler panelindeki Odak noktasını etkinleştir onay kutusunun yanında yer alan Odak noktası konumunu ayarla düğmesini tıklayın.
  2. Odak noktasını yeni konumuna sürükleyin.
  3. Tamam'ı tıklayın.

Odak noktasını açma/kapatma

Resminizin hizalama seçeneklerini kullanarak nasıl görüneceğini öğrenmek için odak noktasını devre dışı bırakabilirsiniz. Odak noktasını yeniden etkinleştirdiğinizde, Web Designer, odak noktasının önceden ayarlanmış konumunu hatırlar.

Seçili resmin odak noktasını açıp kapatmak için aşağıdaki yöntemlerden birini kullanın:

  • Özellikler panelinde Odak noktasını etkinleştir onay kutusunu tıklayın.
  • Resmi sağ tıklayıp pop-up menüden Odak noktasını etkinleştir'i veya Odak noktasını devre dışı bırak'ı seçin.

Odak noktası kaldırma

  1. Görseli sağ tıklayın.
  2. Pop-up menüden Odak noktasını kaldır'ı seçin.

Resmi bir odak noktasıyla değiştirme

Resmi değiştir... işlevini kullandığınızda veya odak noktası etkinleştirilmiş bir resmin kaynağını değiştirdiğinizde, aynı odak noktasını yeni resim için tutup tutmamaya, düzenleyip düzenlememeye veya silip silmemeye karar verebilirsiniz.

Odak noktaları ve medya kuralları

Medya kurallarını kullanarak bir odak noktasının konumunu değiştiremezsiniz. Görüntü alanı boyutuna bağlı olarak farklı resimler görüntülemek istiyorsanız ancak resimler aynı odak noktasını kullanamıyorsa, her iki resmi de dokümanınıza ekleyebilir ve ardından, görünür olmaması gerektiği yerde her bir resmin opaklığını görüntü alanı boyutları için 0 olarak değiştirmek üzere medya kurallarını kullanabilirsiniz.

Kod görünümünde odak noktaları

Odak noktası koordinatları, kod görünümünde gwd-image öğesi için focalpoint özelliğinde ayarlanır. Örneğin:

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

Bu size yardımcı oldu mu?

Bunu nasıl iyileştirebiliriz?
Arama
Aramayı temizle
Aramayı kapat
Ana menü
5553281723734858305
true
Yardım Merkezinde Arayın
true
true
true
true
true
5050422
false
false