Form sayfasına resim ekleneceği durumlarda kullanılan form aracıdır.
Araç Kutusundaki Görünümü |
Free Formdaki Görünümü |
Responsive Formdaki Görünümü |
|
|
|
|
Uyumluluk
Free Form |
Responsive Form |
Mobile |
|
|
|
|
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. Ö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. 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: <horizontal> <vertical>;
- <horizontal>: Yatay hizalama (örneğin: left, center, right, 10%, 30px)
- <vertical>: 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 */