Yazılım

Css fotoğraf sığdırma nasıl yapılır?

Fotoğraflarınız div den dışarı çıkıyor, div içerisine sığmıyor ise div in içerisinde fotoğrafa stil vererek bu sorunu çözeceğiz.

Css fotoğraf sığdırma nasıl yapılır?

Merhaba, div içerisinde kullandığınız fotoğraflar div'den taşıyor ise div içerisinde ki fotoğrafa stil vermemiz gerekiyor.

Bunun için şöyle bir örnek yapalım. Css dosyamıza yeni bir adet div oluşturalım ve adını yazılar yapalım

.yazilar {
position: absolute;
width: 500px;
height: 250px;
border: 1px solid #eee;
}

Yukarıda div'imizi oluşturduk. Ancak fotoğraf eklediğimiz zaman fotoğrafın boyutu div'in boyutundan daha büyük ise div'den dışarıya taşar. Bunun için css dosyamıza yeni bir kod daha yazacağız.

.yazilar img {
object-fit: cover;
width: 100%;
height: 250px;     /* 250px yazan yere kendi div'inizin yüksekliğini girebilirsiniz. */
}

yazılar divinin içerisinde ki img yani fotoğrafa şunları dedik;

  • en boy olarak fitle (sığdır).
  • genişlik %100 olsun.
  • yükseklik ise 250px olsun.

Şimdi yükseklik 250px olduğu için aynı zamanda en boy olarak photoshoptaki gibi en:boy'u kitleyerek büyüttüğü için yüksekliği direkt 250px alıyor divin içine fotoğrafı orantısız bir şekilde büyütmüyor. Yüksekliği 250px yapıyor fotoğrafın sağ tarafını otomatik kırpıyor. Ekranda göstermiyor

ETİKETLER

YORUMLAR