HTML koduna atılan resim nasıl her çözünürlüğe göre ayarlanır?

Merhaba, HTML koduma bir resim ekliyorum, resim 1920x1080 boyutunda, fakat ön izlemek amacı ile açtığımda ekrana çok büyük geliyor. Ekranda sadece bir resim olacak, site açıldığında görünecek. Her çözünürlüğe göre değişmesi için ne yapmalıyım?

manyetiklahmacun dedi:

Merhaba, HTML koduma bir resim ekliyorum, resim 1920x1080 boyutunda, fakat ön izlemek amacı ile açtığımda ekrana çok büyük geliyor. Ekranda sadece bir resim olacak, site açıldığında görünecek. Her çözünürlüğe göre değişmesi için ne yapmalıyım?

Genişletmek için tıkla...

Responsive design için kullanılan bazı çatılar var hocam. Tailwind CSS veya Bootstrap gibi. Tailwind üzerine daisyui ile çok temiz bir şekilde çözebilirsiniz.

manyetiklahmacun dedi:

Merhaba, HTML koduma bir resim ekliyorum, resim 1920x1080 boyutunda, fakat ön izlemek amacı ile açtığımda ekrana çok büyük geliyor. Ekranda sadece bir resim olacak, site açıldığında görünecek. Her çözünürlüğe göre değişmesi için ne yapmalıyım?

Genişletmek için tıkla...

CSS Media query ve widht heidht ile işi çözersiniz ama CSS öğrenmenizi tavsiye ederim.

<İmg> etiketine "res" adı altında bir class ekleyin. Daha sonra stil dosyasına dönün.


Üstteki kodu ekleyin. Görsel küçültürseniz küçülecektir ama hiçbir zaman büyümeyecektir. Orijinal boyutunu da sınırlandırarak tam ekrandayken istediğiniz ölçekte kalmasını sağlayabilirsiniz.