lostyazilim
tr.link

Genişliği Sabit Tutup Yüksekliği Aynı Oranda Değiştirme?

6 Mesajlar 1.321 Okunma
lstbozum
tr.link

mustafayasin mustafayasin PHP & IOS Developer Kullanıcı
  • Üyelik 21.11.2011
  • Yaş/Cinsiyet 30 / E
  • Meslek öğrenci
  • Konum İstanbul Anadolu
  • Ad Soyad M** T**
  • Mesajlar 914
  • Beğeniler 91 / 173
  • Ticaret 11, (%100)
Arkadaşlar wordpresste resimleri listeliyorum. Bu resimlerin boyutları farklı. 300*600 olanı da var 1024*768 olanı da.

Benim yapmak istediğim resimleri listelerken hepsinin de aynı genişliğe sahip olması. Örneğin hepsi de 500px genişliğinde olacak ve resimlerin yükseklikleri de bu değişen genişlikle aynı oranda değişecek. Oran korunarak genişlikler eşitlenecek.

Nasıl yapabilirim acaba?
 

 

wmaraci
reklam

cArleone cArleone WM Aracı Kullanıcı
  • Üyelik 26.11.2013
  • Yaş/Cinsiyet 30 / E
  • Meslek Web master
  • Konum Isparta
  • Ad Soyad A** M**
  • Mesajlar 225
  • Beğeniler 85 / 59
  • Ticaret 9, (%100)
(orinal genişlik/orjinal yükseklik) x 500 = yeni yükseklik.formul bu. :)
 

 

www.ustaderslik.com

mustafayasin mustafayasin PHP & IOS Developer Kullanıcı
  • Üyelik 21.11.2011
  • Yaş/Cinsiyet 30 / E
  • Meslek öğrenci
  • Konum İstanbul Anadolu
  • Ad Soyad M** T**
  • Mesajlar 914
  • Beğeniler 91 / 173
  • Ticaret 11, (%100)

cArleone adlı üyeden alıntı

(orinal genişlik/orjinal yükseklik) x 500 = yeni yükseklik.formul bu. :)


Hocam formülün bu olduğu aşikar da, nasıl yaparız onu soruyorum (:
 

 

cgrclk cgrclk Fortis Fortuna Adiuvat Kullanıcı
  • Üyelik 18.11.2011
  • Yaş/Cinsiyet 35 / E
  • Meslek Web Developer
  • Konum İstanbul Avrupa
  • Ad Soyad B** Ç**
  • Mesajlar 3270
  • Beğeniler 1014 / 1983
  • Ticaret 53, (%100)
Css ile bunu yapabilirsiniz, aşağıdaki değerleri verin img class'ına.

img {
width: 500px;
height: auto;
}

Bu tüm resimleri 500px yapar, yüksekliği de orantılı bir şekilde değiştirir. Eğer 500px'den küçük resimleri 500px boyutuna büyütülerek kalite bozulmasın derseniz o zaman aşağıdaki gibi yazabilirsiniz.

img {
max-width: 500px;
height: auto;
}
xFeyz

kişi bu mesajı beğendi.

wmaraci
wmaraci

cArleone cArleone WM Aracı Kullanıcı
  • Üyelik 26.11.2013
  • Yaş/Cinsiyet 30 / E
  • Meslek Web master
  • Konum Isparta
  • Ad Soyad A** M**
  • Mesajlar 225
  • Beğeniler 85 / 59
  • Ticaret 9, (%100)

mustafayasin adlı üyeden alıntı

Hocam formülün bu olduğu aşikar da, nasıl yaparız onu soruyorum (:


$(function(){
var ig=$("img").width(),ih=$("img").height();
var height=(ig/ih)*500;
$("img").width(500)
$("img").height(height)
})
 

 

www.ustaderslik.com

mustafayasin mustafayasin PHP & IOS Developer Kullanıcı
  • Üyelik 21.11.2011
  • Yaş/Cinsiyet 30 / E
  • Meslek öğrenci
  • Konum İstanbul Anadolu
  • Ad Soyad M** T**
  • Mesajlar 914
  • Beğeniler 91 / 173
  • Ticaret 11, (%100)

cArleone adlı üyeden alıntı

$(function(){
var ig=$("img").width(),ih=$("img").height();
var height=(ig/ih)*500;
$("img").width(500)
$("img").height(height)
})




cgrclk adlı üyeden alıntı

Css ile bunu yapabilirsiniz, aşağıdaki değerleri verin img class'ına.

img {
width: 500px;
height: auto;
}

Bu tüm resimleri 500px yapar, yüksekliği de orantılı bir şekilde değiştirir. Eğer 500px'den küçük resimleri 500px boyutuna büyütülerek kalite bozulmasın derseniz o zaman aşağıdaki gibi yazabilirsiniz.

img {
max-width: 500px;
height: auto;
}

teşekkür ederim, işimi gördü (:
cgrclk

kişi bu mesajı beğendi.

wmaraci
wmaraci
Konuyu toplam 2 kişi okuyor. (0 kullanıcı ve 2 misafir)
Site Ayarları
  • Tema Seçeneği
  • Site Sesleri
  • Bildirimler
  • Özel Mesaj Al