Merhaba;
Bir tane div oluşturuyorum ve bu divin içine bir resim yerleştirmek istiyorum. Diyelim resmin boyutu 500x250 olsun. Benim divin boyutu ise 400x100. Ben bu divin içine yerleştirdiğim resmin orantılı şekilde 400 uzunluğuna gelip div içinde ortalanmasını istiyorum. Bir türlü yapamadım. Bu işlemi nasıl yapabilirim?
Resmi Divin İçine Orantılı Şekilde Nasıl Sığdırabilirim? |
8 Mesajlar | 17.407 Okunma | ||
- Üyelik 06.04.2013
- Yaş/Cinsiyet 27 / E
- Meslek Bilgisayar Mühendisi - Öğrenci
- Konum İstanbul Avrupa
- Ad Soyad A** Ç**
- Mesajlar 1370
- Beğeniler 194 / 204
- Ticaret 18, (%100)
- Üyelik 25.10.2016
- Yaş/Cinsiyet 32 / E
- Meslek Öğrenci
- Konum İstanbul Anadolu
- Ad Soyad S** T**
- Mesajlar 1524
- Beğeniler 894 / 646
- Ticaret 4, (%100)
.img {height:100px;width:400px;}
veya
.img {max-height:100px;max-width:400px;}
olması lazım hocam ikisini de deneyin. Ortalamak için de text-align:center kodunu ekleyebilirsiniz.
veya
.img {max-height:100px;max-width:400px;}
olması lazım hocam ikisini de deneyin. Ortalamak için de text-align:center kodunu ekleyebilirsiniz.
• Samet TEKE > kişisel blog (çok yakında!) •
*Hey, sen! Daha önce hiç forum kurallarını okudun mu?
**Bu siteyi faydalı buluyorsanız premium üyelik alabilirsiniz.
*Hey, sen! Daha önce hiç forum kurallarını okudun mu?
**Bu siteyi faydalı buluyorsanız premium üyelik alabilirsiniz.
- Üyelik 06.04.2013
- Yaş/Cinsiyet 27 / E
- Meslek Bilgisayar Mühendisi - Öğrenci
- Konum İstanbul Avrupa
- Ad Soyad A** Ç**
- Mesajlar 1370
- Beğeniler 194 / 204
- Ticaret 18, (%100)
SametTEKE Hocam text-align:center; kodu sadece yazılar için değil mi?
- Üyelik 12.03.2014
- Yaş/Cinsiyet 27 / E
- Meslek Öğrenci
- Konum İstanbul Anadolu
- Ad Soyad F** S**
- Mesajlar 203
- Beğeniler 57 / 74
- Ticaret 11, (%100)
Resmin boyutu ne olursa olsun ortalamak için dış div e
iç resim e
verirsen resim ortalanır.
position:relative;
iç resim e
position:absolute;
left:0;
right:0;
top:0;
bottom:0;
margin:auto;
verirsen resim ortalanır.
- Üyelik 18.04.2014
- Yaş/Cinsiyet 43 / E
- Meslek bilişim ve e-ticaret uzmanı
- Konum İstanbul Anadolu
- Ad Soyad E** C**
- Mesajlar 317
- Beğeniler 23 / 90
- Ticaret 0, (%0)
İlk olarak bu gibi bir işlem için kullanıcıdan belli boyutta resim yüklemesini istemelisiniz, serbest boyutta yüklenecek resimler için resimlerde görsel bozulmalar uzamalar şişmanlamalar vb olacaktır.
resimler orantılı küçültülüp büyütülmeli aksi durumda resimler bozulur, bozulmadan orantılı küçültme için de yüklenecek resmin boyutunun belirlenmesi gerekir farklı bir durum için ise resimleri kendiniz php içersinde yükleme işlemi esnasında orantılı olarak boyutlandırıp istediğiniz boyut için yan kısımlarda boş kalacak olan kısımları beyaz yada başka bir renk ile doldurabilirsiniz.
resimler orantılı küçültülüp büyütülmeli aksi durumda resimler bozulur, bozulmadan orantılı küçültme için de yüklenecek resmin boyutunun belirlenmesi gerekir farklı bir durum için ise resimleri kendiniz php içersinde yükleme işlemi esnasında orantılı olarak boyutlandırıp istediğiniz boyut için yan kısımlarda boş kalacak olan kısımları beyaz yada başka bir renk ile doldurabilirsiniz.
- Üyelik 03.10.2013
- Yaş/Cinsiyet 44 / E
- Meslek Yazılım Uzmanı, Matematikçi
- Konum Ankara
- Ad Soyad S** T**
- Mesajlar 1118
- Beğeniler 325 / 324
- Ticaret 2, (%100)
background:url('resimadresi') center center;background-size:cover;
www.ontedi.com
www.cizgi.site
www.cizgi.site
- Üyelik 10.11.2013
- Yaş/Cinsiyet 27 / E
- Meslek Front-End Developer
- Konum Adana
- Ad Soyad S** D**
- Mesajlar 1345
- Beğeniler 234 / 472
- Ticaret 12, (%100)
Sorunuzun cevabını net olarak alamamışsınız.
Diyelim ki divinizin boyutu 400x100 resmin ki ise 500x250.
Divimizin classını secici olarak adlandırdım.
Şeklinde ayarlarsanız eğer resmini resim divin içerisine 100% olarak oturur.
Ayrıca object-fit:cover seçeneği ile 500x250 lik bir resmi 400x100 lük dive sığdırmak istediğinizdeki görüntü kirliliğini gidermiş olursunuz. Bu şekilde ayarladığınız da hangi boyutta resim eklerseniz ekleyin o div sınırlarında net görüntüleyecektir.
Diyelim ki divinizin boyutu 400x100 resmin ki ise 500x250.
Divimizin classını secici olarak adlandırdım.
.secici{
width:400px;
height:200px;
}
.secici img{
width:100%;
height:200px;
object-fit:cover;
}
Şeklinde ayarlarsanız eğer resmini resim divin içerisine 100% olarak oturur.
Ayrıca object-fit:cover seçeneği ile 500x250 lik bir resmi 400x100 lük dive sığdırmak istediğinizdeki görüntü kirliliğini gidermiş olursunuz. Bu şekilde ayarladığınız da hangi boyutta resim eklerseniz ekleyin o div sınırlarında net görüntüleyecektir.
sefacandemir.com.tr
Konuyu toplam 1 kişi okuyor. (0 kullanıcı ve 1 misafir)