• 18-02-2021, 17:10:28
    #1
    Zoa
    Gold üye
    Mobilde Resimleri Tam Boyuta Nasıl alabilirim ?
     {
        width: auto;
        height: 300px;
        margin-top: 155px;
        max-width: 100%;
        overflow: hidden;
        background-size:cover;
        }
    #slider {
        background:#fff url(loading.gif) no-repeat 50% 50%;
        position:relative;
        margin:0 auto;/*make the image slider center-aligned */
        box-shadow: 0px 1px 5px #999999;
    }
    #slider img {
        position:absolute;
        border:none;
        display:none;
    }
    
    /* the link style (if an image is wrapped in a link) */
    #slider a.imgLink {
        z-index:2;
        display:none;position:absolute;
        top:0px;left:0px;border:0;padding:0;margin:0;
        width:100%;height:100%;
        
    }
    
    /* Caption styles */
    div.mc-caption-bg, div.mc-caption-bg2 {
        position:absolute;
        width:100%;
        height:auto;
        padding:0;
        left:0px; 
        bottom:15px;
        z-index:3;
        overflow:hidden;
        font-size: 0;
    }
    div.mc-caption-bg {
        background-color:black;
    }
    div.mc-caption {
        font: bold 14px/20px Arial;
        color:#EEE;
        z-index:4;
        padding:10px 0;
        text-align:center;
    }
    div.mc-caption a {
        color:#FB0;
    }
    div.mc-caption a:hover {
        color:#DA0;
    }
    
    
    /* ------ built-in navigation bullets wrapper ------*/
    div.navBulletsWrapper  {
        top:320px; left:280px; /* Its position is relative to the #slider */
        width:150px;
        background:none;
        padding-left:20px;
        position:relative;
        z-index:5;
        cursor:pointer;
    }
    
    /* each bullet */
    div.navBulletsWrapper div 
    {
        width:11px; height:11px;
        background:transparent url(../resim/bullet.png) no-repeat 0 0;
        float:left;overflow:hidden;vertical-align:middle;cursor:pointer;
        margin-right:11px;/* distance between each bullet*/
        _position:relative;/*IE6 hack*/
    }
    
    div.navBulletsWrapper div.active {background-position:0 -11px;}
    
    
    /* --------- Others ------- */
    #slider 
    {
        transform: translate3d(0,0,0);
        -ms-transform:translate3d(0,0,0);
        -moz-transform:translate3d(0,0,0);
        -o-transform:translate3d(0,0,0);
    }


  • 18-02-2021, 17:12:16
    #2
    @media only screen and (max-width: 600px) {
      //istenilen özellik
    }
  • 18-02-2021, 17:12:17
    #3
    @media screen and (max-width:480px) {
    #slider img { width:100%!important }
    }

    buyur hocam.
  • 18-02-2021, 17:13:36
    #4
    Zoa
    Gold üye
    bulentking adlı üyeden alıntı: mesajı görüntüle
    @media screen and (max-width:480px) {
    #slider img { width:100%!important }
    }

    buyur hocam.
    nereye ekleyeceğim hocam tam olarak bunu cssnin
  • 18-02-2021, 17:14:24
    #5
    media query ile responsive de resim genişliğini width: 100%; height: auto; olarak ayarladığınızda ekranı genişlik olarak tam kaplayacaktır. Yapamazsanız eğer bilgi verin yardımcı olayım.
  • 18-02-2021, 17:14:35
    #6
    Zoa adlı üyeden alıntı: mesajı görüntüle
    nereye ekleyeceğim hocam tam olarak bunu cssnin
    en alta ekle hocam
  • 18-02-2021, 17:15:04
    #7
    Zoa adlı üyeden alıntı: mesajı görüntüle
    nereye ekleyeceğim hocam tam olarak bunu cssnin
    Css dosyasına hocam. Html uzantılı dosyaya eklemek için ise şunu uygulayın:
    <style>
    //verdiğim kod
    </style>