yardımcı olurmusunuz- web tasarımında resimin monitörlere göre otomatik ayarlanması

futurist · 17 Ocak 2013

Nerdeyse 100 siteye baktım ama tam bir açıklama bulamadığım bir konuda yardım istemeye karar verdim.

Sorunum şu:
Sitemde alt alta 8 tane div olacak ve her div bir ekranı kaplayacak şekilde yerleştirilecek ve içlerinde resim olacak

yani siteye girer girmez tam ekran bir resim görünecek

Bu dediğimi oluşturduktan sonra sorun şu ki benim bilgisayar ekranım 21 inc yani 1920x1080 boyutunda.
Bu düzende yaptıktan sonra diğer daha küçük monitörlerde resmin tamamı görünmüyor.background-size : cover gibi css düzenlemelerinin hepsini denedim. Kendi bilgisayarımda süper ama başka bilgisayarda açınca facia. Multiscreen de devamlı kontrol ediyorum. Özellikle 1024x748 de resim çok kırpılmış oluyor.
Kısacası her monitöre otomatik ayarlama nasıl yapabilirim. Tabi uzun bir açıklama olmayabilir ama yolunu söylerseniz çok memnun olurum. Sadece jquery ile olur deniyor. Ama hangi eklentiyi aratmalıyım.
Yapmaya çalıştığımın nerdeyse aynısı bir site: http://www.carrier.co.uk/collections/

ayrıca insert -image şeklinde yapılan uygulamayı istemiyorum çünkü üstüne slayt ve yazılar yazacağım için yazılar sorun oluyor. ben backgroun-image olarak atanmış resim için uygulama arıyorum.

yada insert ile olacaksada resmin üzerine sorunsuz divler yerleştirme nasıl olunacağını biliyorsanız o konuyada açığım ben yapamadım çünkü.

şimdiden teşekkür ederim

Emre ÇETİNER · 17 Ocak 2013

www.emrecetiner.com.tr/ornek/resize-bg.zip

jQuery kullanarak hazırladım. 100 siteye bakmışın ama bence doğru aratmamışsın sanırım. Bu tarz örnekler internette çok var. Neyse senin için bir tane yazdım.

Çalışma şekli

HTML:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta ***********="Content-Type" content="text/html; charset=utf-8" />
<title>Site Başlık</title>
<script type="text/javascript" src="http://code.jquery.com/jquery-1.8.0.min.js"></script>
<script type="text/javascript">
    $(document).ready(function() { 
        $("img.source-image").hide();
        var $source = $("img.source-image").attr("src");
        $('#page-body').css({
            'backgroundImage': 'url(' + $source +')',
            'backgroundRepeat': 'no-repeat',
            'backgroundPosition': 'top center'
        });
    }); 
    </script>
</head>
<body id="page-body">
    <img class="source-image" src="imaj/bg.jpg" alt="" />
</body>
</html>

source-image classının bulunduğu img src unu jscript ile çekip id="page-body" kısmının arkaplanına eklettim altında arkaplan devam ettir ve pozisyon kodları da var pencereyi küçülttükçe otomatik boyutlanarak verip düzenliyor.

futurist · 18 Ocak 2013

çok teşekkür ederim. fakat ben bu konuda biraz yeni olduğum jquery yeni başladım. pek bilmiyorum. css kodlarıyla oynayıp yapmaya çalıştım. aratma mevzusuna gelince evet haklı olmalısınız yoksa kesin bulurdum. bu arada google da nasıl yazarak aramalıydım bunu çok merak ediyorum. yaklaşık abartısız 3 hafta gece gündüz bunu araştırdım. bu hariç herşeyi öğrendimde

örneğinize gelince bunu denemek istiyorum ama çalıştırırken üzerinde sanırım oynamak gerekiyor.
anladığım kadarıyla

1- bu yazdıklarınızı title yazandan sonrasını kendi html içine kopyalıyorum
2-
<script type="text/javascript" src="BU BÖLÜME JQUERYDEN İNDİRDİĞİM DOSYAYI TANIMLIYORUM3-BODY PAGE ismini kendi div ismimle değiştiriyorum
4-
<img class="source-image" src="BURAYADA KENDİ ARKAPLAN RESMİMİ YAZIYORUM alt="" />

VE BU SON İD= DEN SONRAKİ KISMI HER 8 DİVİM İÇİN TEKRARMI YAZIYORUM?

ANLADIĞIM BU. İNŞALLAH CEVAP VERDİĞİNİZE PİŞMAN ETTİRMEMİŞİMDİR

ÇOK TEŞEKKÜR EDEİM TEKRAR

Emre ÇETİNER · 18 Ocak 2013

Yok doğru anlamışsın sistem o şekilde çalışıyor. Yukarıda sana html kod şeklinde görüntüsünü attım buna bakarak entegre edebilirsin. Bunun dışında id="page-body" bunu ister body ye ister div olsun nerenin id sine page-body yazarsan o elementin arkaplanına o imajı entegre eder.

majorpsycho · 19 Ocak 2013

Merhabalar Dostum,

Jasvascript yada jQuery kütüphanesi kullanmanın dışında bahsettiğin şeyi sadece css'le de yapabilmek mümkün.

Senin için ufak bi örnek çalışma hazırladım. Aşağıdaki linkten indirebilir ve kendi projene göre css üzerinden geliştirmeler yapabilirsin.

http://www.majordesigner.com/Sample/Responsive.rar

CSS'de bunun için yoğunlaşman gereken; max-width, max-height, (overflow ve yüzdeli değerler), z-index, position (relative, absolute) konularıdır.

Kolay gelsin.

futurist · 24 Ocak 2013

emre çetiner ve majorpsycho çok teşekkür ederim. her ikinizin önerilerini şimdi deneyeceğim.

majorpsycho ne demek istediğimi tam olarak anlamışsınız. gönderdiğiniz tam olarakta yapmak istediğim birşeydi.
Bunu yaptıktan sonra burada paylaşacağım. Şimdilik iyi günler!!!

futurist · 11 Şubat 2013

merhaba emre çetiner ve majorpsycho dediğiniz yöntemleri denedim.
deneyimlerimi paylaşacağımı yazmıştım
evvela emre çetiner in verdiği kodu uygulama kısmında anlamadığım yerler çıktı.
deneme için oluşturduğum htmlyi kopyalıyorum:

HTML:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta ***********="Content-Type" content="text/html; charset=utf-8" />
<title>Untitled Document</title>
<style type="text/css">

}
#main #sayfa2 {
    background-image: url(sitelerim/erolsaygi.net2/images/background0150.jpg);
    height: 960px;
    width: 100%;
}
#main #page-body {
}
#main #sayfa3 {
    background-image: url(sitelerim/erolsaygi.net2/images/faydal%C4%B1bilgiler1.png);
    height: 960px;
    width: 100%;
}
#main {
    background-color: rgb(0,204,153);
    margin: 0px;
    padding: 0px;
}
</style>

<script type="text/javascript" src="sitelerim/jquery-1.9.1.min.js"></script>
<script type="text/javascript">
    $(document).ready(function() { 
        $("img.source-image").hide();
        var $source = $("img.source-image").attr("src");
        $('#page-body').css({
            'backgroundImage': 'url(' + $source +')',
            'backgroundRepeat': 'no-repeat',
            'backgroundPosition': 'top center'
        });
    }); 
    </script>
</head>
<body id="main">
<div id="page-body">
    <img class="source-image" src="sitelerim/erolsaygi.net2/images/anasayfa.png" alt="" /></div>

<div id="sayfa2"></div>
<div id="sayfa3"></div>



</body>
</html>

yukarıdaki gibi bir body tanımladım divin içindede koplayabilirsiniz yazmıştınız.
altına sıralı sayfa1, sayfa2, sayfa3 şeklinde div oluşturmak istesem bu yazdığım gibi çalışmıyor. alt alta kopyalsam bile aynı dosya ismi aynı olamaz.

sadece body=page-body diyerek body içinde tanımlarsam çalışıyor. ama tek resim olarak çünkü birden fazla body tanımlaması yapamam.
hadi diyelimki tek resim istedim. ekrana göre değişme durumu yok. ben değişiklik göremedim.1900 inçten 1024 monitöre inince aşağıda kaydırma çubuğu çıkıyor.

Netice itibariyle ya kod yanlış ya ben acayip beceriksizim.

:dontknow2:

majorpsycho için GELELİM DİĞER CSS UYGULAMASINA:
en güzel ve basit yöntemlerden birisi fakat ondada şöyle bir problem çıkıyor
div id=sayfa1
div id=sayfa2
div id=sayfa3
.
.
.
div id=sayfa8
dedim ve bunlara insert image diyerek resim atadım. ve süper çalışıyor her tarayıcıda.
fakat ben bu resimlerin içinde yazı eklemek için absolute div olarak( saydam) sizinde örnekte verdiğiniz gibi divler oluşturdum.
fakat onların konumlama kısımlarında hep problem çıkıyor
mesela choreme da açtığımda tamam heryer yerli yerinde
mozillada açınca absolute aşağıya kaymış oluyor.
internet explorer 8benimki sayfamlık kaybolmuş oluyor. internte explorer o durumu desteklemiyor hadi onu boşverdim. 10 px genişlik 30 px olarak görünüyor.
kısaca absolute divler başa bela

Sizin veridğiniz örnek güzeldi. ama tek bir yazı yazmışsınız ben bu resimlerin önüne slayt gib şeylerde eklemek istediğimde durum zorlaşıyor.Belki buda benim acemiliğimdendir.

Yanlış anlamayın yöntemlerinizi eleştirmek değil amacımkesinlikle hatta bilakis zaman ayırıp yardımcı olduğunuz için çok teşekkür ederim. benim gibi sorun yaşayan arkadaşlar okusun. bilenlerde yardım etsin diyerek yazıyorum bunları.

peki netice ne oldu derseniz:

HTML:

background: url( resim);
background-repeat: no repeat;
background-position: center center;
-webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;

en güzel yöntemin bu olduğunu düşünüyorum fakat cover komutu resimi çok yaydığı için ben arayışa düşmüştüm aslında
bu koda ekleme yaparak coverın çok genişlemesini engelleyebilirsem. böyle bir şey kullanmayı düşünüyorum. böylece üstüne dilediğince yazı materyalı sorunsız eklenebilir.

absolute bir divin içinde kullanınca yada class ile bir özellik katarken güzel ama sadece ortada tek başına kullanmak iyi değil. evet tek bilgisayarda güzel ama tarayıcı ve monitör değişikliğinde facia
daha doğrusu benim için öyle. sitelerden siteye yazılar videolar, dosyalar. yabancı kaynaklar kod kod kod tam şizofrenik bir iş oldu bana.

yorum yazın lütfen

Emre ÇETİNER · 11 Şubat 2013

majorpsychovermiş olduğu cssle yapılabilir 100 bg için onu kullan. Absolute'e gelince. pozisyonu absolute verdiğin objeden bir önceki objeye position:relative vermediğin için pozisyonu belirleyemiyor. Hangi alan içinde pozisyonu aobsolute olacaksa o dışındaki kısma css'de position:relative; eklersen sorun kalmayacak gibi gözüküyor.

Ömer BOZALAN · 12 Şubat 2013

yani aslında resim çoğaltılabiliyor tabikide . ama şunu unutuyorsunuz gibi geliyor arkadaşlar. arkaplan resim boyutu çok büyük seçilmeli bu tür işlemlerde. Yoksa resim tekrar edecektir.

futurist · 16 Şubat 2013

@Ömer BOZALAN

1900 px yeterince büyük

yardımcı olurmusunuz- web tasarımında resimin monitörlere göre otomatik ayarlanması

futurist

Üye

Emre ÇETİNER

Altın Üye

futurist

Üye

Emre ÇETİNER

Altın Üye

majorpsycho

Üye

futurist

Üye

futurist

Üye

Emre ÇETİNER

Altın Üye

Ömer BOZALAN

Altın Üye

futurist

Üye