Nasıl oluşturulur: Etkileşimli görsel

CSS ile etkileşimli görsel nasıl oluşturulur öğrenin.

Etkileşimli görseller otomatik olarak ekran boyutuna uyum sağlar.

Tarayıcı penceresini büyütmek için ayarlayın ve etkileşimli sonuçları görüntüleyin:

Işıklandırma

Sonuçları görüntüle

Etkileşimli görsel nasıl oluşturulur

İlk adım - HTML ekleyin:

<img src="nature.jpg" alt="Nature" class="responsive">

İkinci adım - CSS ekleyin:

Etkileşimli görsellerin hem genişlemesi hem de küçülmesine izin vermek için CSS'nin width Özelliği ayarlayın 100%,height Ayarlayın auto:

Örnek

.responsive {
  width: 100%;
  height: auto;
}

Kişisel olarak deneyin

Görseli gerektiğinde küçültmek, ancak orijinal boyutundan büyük olmayacak şekilde genişletmemek için kullanın: max-width: 100%:

Örnek

.responsive {
  max-width: 100%;
  height: auto;
}

Kişisel olarak deneyin

Etkileşimli görselleri maksimum boyuta sınırlamak için kullanın: max-width Özellikler ve seçtiğiniz piksel değeri:

Örnek

.responsive {
  width: 100%;
  max-width: 400px;
  height: auto;
}

Kişisel olarak deneyin

İlgili sayfa

Ders:CSS resmi:

Ders:CSS yanıt verir web sayfası tasarımı: