CSS'de Bir Resmin Konumu Nasıl Ayarlanır?

Geliştiriciler, görüntünün diğer HTML öğelerine göre sırasını ve boyutlarını belirleyerek net bir görsel hiyerarşi oluşturmak için görüntünün konumunu ayarlar. Görüntüyü çeşitli konumlara yerleştirerek, web sitesinin görünümünü ve hissini değiştirebilen modern, benzersiz ve özel tasarımlar da üretilebilir. Bu makale, CSS kullanarak bir görüntünün konumunu ayarlama prosedürünü göstermektedir.

- Float Özelliğini Kullanma
- nesne konumu Özelliğini kullanma

CSS'de Bir Resmin Konumu Nasıl Ayarlanır?

CSS'de bir görüntünün konumunu ayarlayarak, ' hassas yerleştirme ”, “ örtüşen eleman ' Ve ' duyarlı tasarım ” kolayca elde edilebilir. Geliştiriciler bu avantajları kullanarak tamamen işlevsel ve göz alıcı bir web sitesini kolayca özelleştirebilir ve oluşturabilir. Bir görüntünün konumunun ayarlanabileceği iki yöntem/özellik vardır. Bu özellikler aşağıda açıklanmıştır:

Yöntem 1: Float Özelliğini Kullanma

“ batmadan yüzmek ” özelliği, HTML öğelerinin “ içindeki hareketi için CSS tarafından sağlanır. sol ' veya ' Sağ ' yön. HTML öğelerinin kesin yerleşimi için duyarlı düzen oluşturulurken çoğunlukla kullanılır.

Örneğin, web sayfasının hem sol hem de sağ tarafındaki görüntüleri hizalamak için “float” özelliği kullanılır:

< div >
< img kaynak = 'bg.jpg' yükseklik = '300 piksel' Genişlik = '400 piksel' sınıf = 'PozisyonSağ' >
< img kaynak = 'kitap.jpg' yükseklik = '300 piksel' Genişlik = '400 piksel' sınıf = 'sol konum' >
div >

Yukarıdaki kodda:

- İlk olarak, kök ' div ” öğesi, HTML öğeleri için bir kapsayıcı olarak çalışan oluşturulur.
- Sonra, iki ' ” etiketleri “ içinde kullanılır.
  ' etiket.
- Bundan sonra “ değerleri 300 piksel ' Ve ' 400 piksel ”, “ yükseklik ' Ve ' Genişlik 'ikisinin de özellikleri' ” etiketleri.
- Ayrıca, bir “ sınıfı atayın pozisyonSağ ' Ve ' konumSol ” sırasıyla birinci ve ikinci “ ” etiketlerine.

Şimdi, “ ” etiketi, aşağıdaki CSS özelliklerini uygulamak için:

< stil >
.pozisyonSağ {
Sağa çık;
}
.pozisyonSol {
kayan nokta: sol;
}
stil >

Açıklama aşağıda verilmiştir:

- İlk olarak, “ pozisyonSağ ” sınıfı ve “ değerini ayarlayın Sağ ” onun “ batmadan yüzmek ' mülk. Bu, seçilen HTML öğesini web sayfasında doğru yönde hareket ettirir.
- Ardından, “ konumSol ” sınıflandırın ve “ değerini sağlayın sol ” “a batmadan yüzmek ' mülk. Bu, öğeyi sol tarafa doğru hareket ettirir.

Derleme aşamasının bitiminden sonra:

Çıktı, görüntülerin sol ve sağ konumlara ayarlandığını gösterir.

Yöntem 2: nesne konumu Özelliğini Kullanma

“ nesne konumu ” özelliği, görüntünün veya HTML öğesinin web sayfasında belirli bir konuma yerleştirilmesini sağlar. Kullanıcının istenen görsel efekti veya düzeni elde etmesine izin vererek yatay ve dikey konumlandırma üzerinde kontrol sağlar. Geliştiriciler tarafından çoğunlukla görüntü kırpma, küçük resimler oluşturma, özel düzenler vb. için kullanılır.

Bu özellik hem sayısal hem de anahtar sözcük değerleri alabilir. Örneğin, “ için hem sayısal hem de anahtar kelime değerleri sağlanır. nesne konumu ' mülk. Aşağıdaki kod parçacığında bir görüntünün CSS'deki konumunu ayarlar:

< stil >
.Sayısal değerler
{
nesne konumu: 100px 20px;
}
.keywordValues
{
nesne konumu: sol;
}
stil >
< vücut >
< div >
< img kaynak = 'kitap.jpg' yükseklik = '300 piksel' Genişlik = '400 piksel' sınıf = 'anahtar kelimeDeğerleri' >
< img kaynak = 'bg.jpg' yükseklik = '300 piksel' Genişlik = '400 piksel' sınıf = 'Sayısal değerler' >
div >
vücut >

Yukarıdaki kod parçacığında:

- İlk önce ' Sayısal değerler ” sınıfı “ içerisinden seçilir. ' etiket. Ve sayısal değerler “ 100 piksel 20 piksel ” CSS'ye sağlanır “ nesne konumu ' mülk. “ 100 piksel ” yatay yönde eklenen boşluk ve “ 20 piksel ” dikey için.
- Sonra, “ anahtar kelimedeğerleri ” sınıfı seçilir ve anahtar kelime değeri “ sol ”, “ nesne konumu Görüntüyü sola doğru hizalamak için ” özelliği.
- Bundan sonra, içinde “ ” etiketi ile iki görsel oluşturulur ve bunlara yukarıda oluşturulan sınıflar atanır.

Derleme aşamasının bitiminden sonra web sayfası şöyle görünür:

Anlık görüntü, görüntülerin artık belirli konumlara ayarlandığını gösterir.

Çözüm

Bir görüntünün konumu CSS kullanılarak ayarlanabilir ' batmadan yüzmek ' Ve ' nesne konumu ' özellikler. “ batmadan yüzmek ” özelliği, anahtar kelimeyi bir değer olarak alır ve öğeyi sola veya sağa konumlara taşır. Öte yandan, “ nesne konumu ”, hem anahtar kelime hem de sayısal değerleri yatay ve dikey yönlerde alır. Bu makale, CSS'de bir görüntünün konumunu ayarlama prosedürünü göstermiştir.

CSS'de Bir Resmin Konumu Nasıl Ayarlanır?