Konu: resimleri javascript kulanmadan css ile kücültüp büyütmek  (Okunma sayısı 561 defa)

0 Üye ve 1 Ziyaretçi konuyu incelemekte.

03 Eylül 2014, 20:58
  • *
    • İleti: 211
    • Karma: 15
    • webtiryaki.com
    • Profili Görüntüle

evet son zamanlarda cok sorulan bu isteğe bir doküman hazirlama gereği duydum bu kodlarla
bbc resimlerini
avatar resimlerini
imza resimlerini
kisacasi attached imagelerin tamamini düzenleyip devredişi yapa bilirsiniz

bu kodlari temanizin index.css de uygun bir yere ekleyin

Kod: [Seç]
/* Auto resizing of avatars in posts and personal messages. */
/* Change sizing to suit your own preferences. */
.avatar>a>img, li.avatar>img {
   height: auto;
   width: auto;
   max-height: 150px;
   max-width: 125px;
}

/* Auto resizing of avatars in default theme header. */
/* Change sizing to suit your own preferences. */
p.avatar>img {
   height: auto;
   width: auto;
   max-height: 150px;
   max-width: 125px;
}

/* Auto resizing of images in posts and personal messages. */
/* Change sizing to suit your own preferences. */
.inner>img, .inner>blockquote>img,
.inner>.bbc_link>img, .inner>blockquote>.bbc_link>img{
   height: auto;
   width: auto;
/* This is just to keep images to a handy size, even on large screens. */
   max-height: 640px;
/* This prevents images breaking out of the post on small screens. */
   max-width: 95%;
}


/* Auto resizing of images in signatures. */
/* Change sizing to suit your own preferences. */
.signature>img, .signature>blockquote>img,
.signature>.bbc_link>img, .signature>blockquote>.bbc_link>img {
   height: auto;
   width: auto;
   max-height: 150px;
   max-width: 95%;
}
.attachments>div>img {
   height: auto;
   width: auto;
   max-width: 95%;
   max-height: 640px;
}

burdaki mantik şoyle
orneğin
attached images(bbc eklentileri):

Kod: [Seç]
.attachments>div>img {
height: auto;
width: auto;
max-width: 95%;
max-height: 640px;
}


   height: auto; yukseklik otomotk ayarlanir yani belirtilen genişlik yukseklik
   width: auto;  genişlik otomotk ayarlanir yani belirtilen genişlik yukseklik
   max-width: 95%; enfazla genişlik yüzde olarak belirliyoruz bu her ekran icin ayni gorulmesine yol acar
   max-height: 640px; enfazla yükseklik burayi resim sitandartina göre ayarliyoruz ne gorünmesini istiyorsak

orneğin portal kulananlar

Simple Portal:

Kod: [Seç]
.shoutbox_body>ul>li>img, .shoutbox_body>ul>li>.bbc_link>img {
height: auto;
width: auto;
max-width: 95%;
max-height: 200px;
}

Tiny Portal:

Kod: [Seç]
.shoutbox_body>ul>li>img, .shoutbox_body>ul>li>.bbc_link>img {
height: auto;
width: auto;
max-width: 95%;
max-height: 200px;
}

mantik böyle umarim yararli olur diğer yayinladiğim derslere bakkarak neyin nerde olduğunu rahatlikla bula bilirsiniz.


03 Eylül 2014, 21:19
Yanıtla #1
  • *
    • İleti: 14
    • Karma: 0
    • RCKolik
    • Profili Görüntüle


05 Eylül 2014, 20:12
Yanıtla #2
  • *
    • İleti: 8
    • Karma: 0
    • Torrent-Oyunu.com
    • Profili Görüntüle

evet son zamanlarda cok sorulan bu isteğe bir doküman hazirlama gereği duydum bu kodlarla
bbc resimlerini
avatar resimlerini
imza resimlerini
kisacasi attached imagelerin tamamini düzenleyip devredişi yapa bilirsiniz

bu kodlari temanizin index.css de uygun bir yere ekleyin

Kod: [Seç]
/* Auto resizing of avatars in posts and personal messages. */
/* Change sizing to suit your own preferences. */
.avatar>a>img, li.avatar>img {
   height: auto;
   width: auto;
   max-height: 150px;
   max-width: 125px;
}

/* Auto resizing of avatars in default theme header. */
/* Change sizing to suit your own preferences. */
p.avatar>img {
   height: auto;
   width: auto;
   max-height: 150px;
   max-width: 125px;
}

/* Auto resizing of images in posts and personal messages. */
/* Change sizing to suit your own preferences. */
.inner>img, .inner>blockquote>img,
.inner>.bbc_link>img, .inner>blockquote>.bbc_link>img{
   height: auto;
   width: auto;
/* This is just to keep images to a handy size, even on large screens. */
   max-height: 640px;
/* This prevents images breaking out of the post on small screens. */
   max-width: 95%;
}


/* Auto resizing of images in signatures. */
/* Change sizing to suit your own preferences. */
.signature>img, .signature>blockquote>img,
.signature>.bbc_link>img, .signature>blockquote>.bbc_link>img {
   height: auto;
   width: auto;
   max-height: 150px;
   max-width: 95%;
}
.attachments>div>img {
   height: auto;
   width: auto;
   max-width: 95%;
   max-height: 640px;
}

burdaki mantik şoyle
orneğin
attached images(bbc eklentileri):

Kod: [Seç]
.attachments>div>img {
height: auto;
width: auto;
max-width: 95%;
max-height: 640px;
}


   height: auto; yukseklik otomotk ayarlanir yani belirtilen genişlik yukseklik
   width: auto;  genişlik otomotk ayarlanir yani belirtilen genişlik yukseklik
   max-width: 95%; enfazla genişlik yüzde olarak belirliyoruz bu her ekran icin ayni gorulmesine yol acar
   max-height: 640px; enfazla yükseklik burayi resim sitandartina göre ayarliyoruz ne gorünmesini istiyorsak

orneğin portal kulananlar

Simple Portal:

Kod: [Seç]
.shoutbox_body>ul>li>img, .shoutbox_body>ul>li>.bbc_link>img {
height: auto;
width: auto;
max-width: 95%;
max-height: 200px;
}

Tiny Portal:

Kod: [Seç]
.shoutbox_body>ul>li>img, .shoutbox_body>ul>li>.bbc_link>img {
height: auto;
width: auto;
max-width: 95%;
max-height: 200px;
}

mantik böyle umarim yararli olur diğer yayinladiğim derslere bakkarak neyin nerde olduğunu rahatlikla bula bilirsiniz.


hocam güzel anlatmışınız fakat şöyle bi sorun var

bunu normal olarak ekledıgımızde calısıyor. fakat resımı ortaladıgımızda tekrardan resım büyüyor. onada bakabılırsen güzel olur


05 Eylül 2014, 23:27
Yanıtla #3
  • *
    • İleti: 211
    • Karma: 15
    • webtiryaki.com
    • Profili Görüntüle

bu kodlarla center kodunun bir alakasi yok sorun sitenize eklediginiz devider kodlari botlar sitenize geldiğinde sadece arka fona atiğiniz resimi indekler iceriği filan görmez size tafsiyem temanizin  0 halini kulanin herkodu sitenize eklemeyin yok ben bunu kulanicamda diyorsaniz
index.css satir 58 deki şu kodu

Kod: [Seç]
.bbc_img {
border: 0;
}
bununla değişin
Kod: [Seç]
.bbc_img {
border: 0;
height: auto;
width: auto;
max-width: 95%;
max-height: 640px;
}