• 28-09-2018, 23:31:12
    #1
    Arkadaşlar bir sorum olacaktı CSS ile ilgili.
    Şimdi bir div olduğunu düşünelim 500x500. Bunun içine bir resim koyuyoruz ama taşmaları gizliyoruz. (overflow:hidden)
    Daha sonra şöyle bir sıkıntım oluyor:
    Örnek veriyorum, 1200x900 bir fotoğraf koyduğumuzda sadece sol üstten 500x500 gözüküyor div içinde. Ya da tam tersi 900x1200 koyduğumuzda da aynı.
    Benim yapmak istediğim genişlik veya uzunluk hangisi daha az ise onu 500px boyutuna indirip diğerini de orantılayarak küçültmek. Kısaca görsellerle açıklayayım.
    Sadece boş yer kalmayacak kadar büyümesini istiyorum fotoğrafın. Artan yerler ise görünmeyecek.



  • 28-09-2018, 23:37:31
    #2
    background: url(resim.jpg') no-repeat center center fixed;
    -webkit-background-size: cover;
    -moz-background-size: cover;
    -o-background-size: cover;
    background-size: cover;
  • 28-09-2018, 23:40:46
    #3
    object-fit: cover

    https://www.w3schools.com/css/css3_object-fit.asp
  • 28-09-2018, 23:41:22
    #4
    img{object-fit:cover}
  • 28-09-2018, 23:41:35
    #5
    .div{
    width:500px;
    height:500px;
    }
    .div img{
    width:100%;
    height:500px;
    object-fit:cover;
    }

    kabaca bu şekilde.
  • 28-09-2018, 23:44:12
    #6
    ademgao adlı üyeden alıntı: mesajı görüntüle
    .div{
    width:500px;
    height:500px;
    }
    .div img{
    width:100%;
    height:500px;
    object-fit:cover;
    }

    kabaca bu şekilde.
    Hocam ama böyle orantısız bir şekilde sığdırılıyor içeri. Resim x veya y ekseninde genişletiliyor.
  • 29-09-2018, 00:20:57
    #8
    img tagına sabit width height yüksekliği vermeyin @FSahin; verdiği kurala ek olarak width:100; height:100; verin resim kendini bulunduğu alana uyduracaktır.
  • 29-09-2018, 10:43:54
    #9
    css de max-height:500px ve max-width:500px deneyebilir misiniz.