Araç Kutusundaki Görünümü

Free Formdaki Görünümü

Responsive Formdaki Görünümü

mceclip0.png

mceclip1.png

mceclip2.png

 

Uyumluluk

Free Form

Responsive Form

Mobile

icons8-check-circle-48.png

icons8-check-circle-48.png

icons8-check-circle-48.png

 

Picture aracının özellikleri

Type(Alan Türü): Eklenilen form aracının alan türünü gösterir. Burada yer alan değer değiştirilemez.

Name(Alan İsmi): Veri tabanında oluşacak olan alanın ismi yazılır.

Picture Path(Resim Yolu): Resim alanına eklenmek istenilen bir resmin URL'si eklenir.

A.png

mceclip3.png

Örnek Link: https://www.xpoda.com/assets/img/what-is-no-code-header.jpg

 

Help Text(Yardım Metni): Form aracı üzerine Fare ile gelindiğinde açıklama çıkması için girilen metindir. 

B.png

mceclip5.png

Height(Yükseklik): Form aracının yüksekliğini ve genişliğini düzenler(Genişlik alanı Responsive Formlardan kaldırılmıştır).

Image Size(Resim Boyutu): Veri tabanında saklanılacak olan resmin boyutu belirlenir.

Store in File(Dosyada Sakla): Özellik etkinleştirildiğinde, eklenen görüntü SQL'de tabloda saklanmak yerine Xpoda'nın kurulu olduğu sunucuda yerel bir klasörde saklanır.

Display(Görünür): Form aracının Client ekranında görünmemesini sağlar.

Form Only(Sadece Formda): Form aracına girilen bilgileri SQL'e kaydetmeyerek, sadece formda oluşmasını sağlar. Burada sonradan yapılan değişiklikler veri tabanını etkilemez.

 

Client ekranında resme sağ tıklayıp yeni resim ekleyebilir, eklenen resmi orijinal boyutunda görüntüleyebilir, eklenen resmi silebilir ve indirebilirsiniz.

 

Picture Aracına CSS Özelliği Ekleme 

(object-fit ve object-position)

Bu bölümde, görsellerin bir kapsayıcı (Picture elemanı) içinde nasıl hizalanıp boyutlandırılacağını kontrol eden object-fit ve object-position CSS özellikleri açıklanmaktadır. Farklı değerlerin picture elemanına etkisi örneklerle gösterilmiştir.

object-fit CSS Özelliği

object-fit özelliği, bir görselin Picture form aracı içerisinde nasıl görüntüleneceğini kontrol etmenizi sağlar. Bu özellik, görsellerin hizalanma ve boyutlandırma şeklini belirlemek için kullanılır.

Aşağıda object-fit değerlerinin açıklamaları yer almaktadır:

  • object-fit: fill;
    Görsel, Picture aracını tamamen dolduracak şekilde yeniden boyutlandırılır. Bu sırada orijinal en-boy oranı korunmaz; görsel gerekirse yatay ya da dikey olarak sıkıştırılır veya gerilir.
  • object-fit: cover;
    Görsel, Picture aracını taşmayacak şekilde en-boy oranı korunarak büyütülür. Gerekirse taşan kısımlar kırpılır. Görselin tamamı görünmeyebilir.
  • object-fit: contain;
    Görselin en-boy oranı korunarak, Picture aracı içine sığacak en iyi şekilde boyutlandırılır. Görsel tamamen görünür, ancak Picture aracında boşluklar oluşabilir.
  • object-fit: scale-down;
    Görsel, none ve contain değerlerinden hangisi daha küçükse ona göre küçültülür. Yani görsel ya orijinal boyutunda kalır ya da Picture aracına sığacak şekilde küçülür.
  • object-fit: none;
    Görsel orijinal boyutunda kalır; hiçbir yeniden boyutlandırma yapılmaz. Picture aracına sığıp sığmadığına bakılmaz.

object-position CSS özelliği

Bir görselin, Picture aracı içinde konumlandırılmasını kontrol eder. Genellikle object-fit özelliği ile birlikte kullanılır.

Bir görseli Picture aracı içinde nereye yerleştireceğinizi belirlemenizi sağlar. Özellikle object-fit: cover veya contain kullanıldığında, görselin hangi bölgesinin ön planda olacağı bu özellik ile ayarlanabilir.

object-position: ;

  • : Yatay hizalama (örneğin: left, center, right, 10%, 30px)
  • : Dikey hizalama (örneğin: top, center, bottom, 20%, 5px)

Not: Eğer sadece bir değer verilirse, ikinci değer otomatik olarak center kabul edilir.

 

Örnek Kullanım:

object-position: center center;   /* Ortalar (varsayılan) */
object-position: top right;       /* Üst sağ köşe */
object-position: 20% 80%;         /* Yatayda %20, dikeyde %80 */
object-position: 10px 15px;       /* Sol üstten 10px ve 15px uzaklıkta */