- 3 October 2008
- CSS
- 8 Comments
-
Tags: auto resize, CSS, css resim boyutlandırma, image resize, max-height, max-width, otomatik boyutlandırma, php resim boyutlandırma, preg_match auto resize, resim boyutlandır, style -
-
Tweet
Div içindeki resimleri otomatik boyutlandırma (image auto resize)
3 October 2008 Posted By Osman ERDOĞAN
Normalde fikir olarak PHP içinde preg_match ile yapmayı düşünmüştüm mesaj içindeki resimlerin boyutlandırmasını fakat arayış içerisindeken (google da ara ara bişey çıkmıyor), css stili ile yapılabileceğini buldum ki çok mantıklı yapılabiliyor (bu özelliği biliyorum ama o an insanın aklına gelmiyorki yok preg_match yok php vs vs...)
Neyse öncelikle varsayım olarak bir div tagimiz var diyelim adı da "mesajici" olsun:
HTML:
Buradaki style bölümünde css kodlarımızı yazıyoruz ve max-width: maximum genişlik; max-height: maximum yükseklik anlamındadır.
Tekrar söylüyorum ben div id olarak mesajici verdim sizin scriptlerinizde sitelerinizde ne olur bilemem ona göre düzenleyebilirsiniz.
Kolay gelsin.
8 Responses to “Div içindeki resimleri otomatik boyutlandırma (image auto resize)”
Merhaba,
Sevgili üstadım. CSS ile evet yapılabiliyor. Ancak HTML kodları ile yapılandan farksız oluyor. Yani resimde görüntü bozuklukları oluyor. İlla ki betik bir dille bunu resize etmemiz gerekiyor. Yöntemini denedim. Paylamışın için teşekkür ederim ancak resize etmeden istediğim görüntüyü elde edemiyorum. Şimdi bu dediğin preg_match yöntemini araştırmaya koyuluyorum. Tekrar teşekkür ederim.
Saygılarımla
Emin ÖZTÜRK
Merhaba Emin Bey,
Dediğinizde haklısınız bende o yöntem ile yapacaktım ama html kullananlar için direk ve basit bir yöntem olarak kullanılabilir diye bunu yazmıştım.
Php de bahsettiğiniz preg_match kullandığınızda thumbnail yapmak için class kullanmanız gerekecek.
“img” tagını bulup “src“‘sini alıp, resim adresini resize edecek.
Bu sistemi en kısa sürede inceleyip test edip yazmaya çalışacağım.
İyi Çalışmalar
Osman Erdoğan
hocam eyvallah guzel demısın de ben resımlerı db den cekıyorum adı ustunde php kullanıyoruz acık kaynak kodu her gun genıslıyor css ıle sorgudan nasıl cekıle bılırkı ?
Mantık basit güzel ama unutulan çok önemli birşey var. Mesela resimin orjinal boyutu 640480px olsun. Siz bu resimin boyutunu 100x100px yapmak istediğinizde istediğini boyuna resim gösterilir. Ancak resim orjinal halindeyken sadece width ve height değerlerinin değiştirilmesi ile gösteriliyor. Resimi otomaitk küçülterek boyutlandırma işlemi yapılsaydı daha iyi olurdu.
@onur : Veritabanı ile alakası yok bu işlemin sadece CSS
tagleri arasına yazdığında otomatik oluyor.
@Ahmet: Dikkat ettiysen direk height, width vermedim. max-height ve max-width verdim. Ozaman orantılı büyüklük ve küçüklük işlemi yapıyor. Kısacası tek taraftan ölçüm yapıp ona göre diğer tarafıda küçültüyor.
Üstad uzun zamandır arıyordum bunu ama daha dün bulabildim, ama bilgi denen zıkkım ele geçtikten sonra dağılırmış ya keşke senin siteyi dah önce görseymişim..
Neyse sistem çok güzel çalışıyor bence. Eğer thumnail veya resim işleme işlemleriyle uğraşmıyor ancak esimlerin boyutları sebebiyle oluşan görüntü bozukluklarını gidermekse amaç, evet en iyi, en kesin, en verimli ve en kolay yol bu. Ellerine sağlık paylaşımın için..
Teşekkür ederim Alper,
Zamanında bende çok aramıştım
La adamsın adam…