One page



  • Merhaba , kafama takılan bir konu var en basit yoluyla anlatayım. http://flatheme.net/demo/luna/ bu örnekte olduğu gibi sitenin header kısmı her çözünürlüğe göre fullscreen resize oluyor.Ben parallax vs. istemiyorum.Tek istediğim açılan her ekran boyutunda ekrana oturması ve img tagındaki fotoğrafın resize olması .Buraya kadar height:calc(100%) ile yapıyorum ama sayfa aşağıya doğru devam edeceği için height:calc olayı bunu engelliyor .Burada tıkandım kaldım.Bir türlü yapamıyorum.

    Umarım anlaşılır olmuştur.


  • administrators

    @Derek söyledi:

    Merhaba , kafama takılan bir konu var en basit yoluyla anlatayım. http://flatheme.net/demo/luna/ bu örnekte olduğu gibi sitenin header kısmı her çözünürlüğe göre fullscreen resize oluyor.Ben parallax vs. istemiyorum.Tek istediğim açılan her ekran boyutunda ekrana oturması ve img tagındaki fotoğrafın resize olması .Buraya kadar height:calc(100%) ile yapıyorum ama sayfa aşağıya doğru devam edeceği için height:calc olayı bunu engelliyor .Burada tıkandım kaldım.Bir türlü yapamıyorum.

    Umarım anlaşılır olmuştur.

    Bahsettiğin herşeyin çözümü, http://flatheme.net/demo/luna/css/bootstrap.min.css. Bootstrap bir css frameworküdür ve responsive çalışır.
    https://getbootstrap.com/examples/navbar-fixed-top/ adresinden bootstrap framework ü üzerinde yapılmış header' ın ekran boyutları değiştikçe nasıl responsive bir şekilde küçülüp büyüdüğünü de görebilirsin.

    Resimler için de http://getbootstrap.com/css/#images adresini incelersen tam senin istediğin iş için img-responsive class' ı olduğunu göreceksin.



  • yeterince açık anlatamamışım demekki =) bu bahsettiğiniz components ve classları kullanıyorum hali hazırda.Fakat bu her çözünürlükte ekrana tam oturmasını sağlamıyor. Mesela 1920 x 1080 çözünürlükte boşluklar kalırken 1024 x 768 çözünürlükte tam oturuyor. http://johnpatrickgiven.com/jquery/background-resize/ bu örnekte belirli width ve heightlerde tam oturması için mantıken crop yapıyor .Fakat ben jquery kullanmak istemiyorum..

    Sayfa height'ini alarak çözdüm fakat mobilde sıkıntı çıkarıyor haliyle ;

    var w = angular.element($window);
    $scope.$watch(
    function () {
    return $window.innerHeight - 50;
    },
    function (value) {
    $scope.windowHeight = value;
    },
    true
    );

    w.bind('resize', function(){
    $scope.$apply();
    });


  • administrators

    Yazdığın js kodunun ne iş yaptığını tam anlayamadım açıkçası, js in hangi işini yapmasını istediğini anlatırsan ona göre bir çözüm üretmeye çalışıyım


Cevaplamak için giriş yapın