Css ile overflow:hidden ile gizleme. (Yardım)

Arkadaşlar bir resmi bir öğeyi overflow:hidden ile gizlemek istiyorum ancak fazlalığı hem üsten hem alttan götürsün istiyorum.


overflow:hidden kullandığımda fazlalığı sadece alt kısımdan götürüyor, hem üsten hem alttan orantılı şekilde fazla kısmı bu kodla veya başka kodlar yapma imkanımız var mı?


Kısaca şöyle açıklayayım: bir çerçeve belirleyeceğiz resmi o çerçeveye oturtmaya çalışacağız. Resim çerçeveden büyükse ortalanacak ve fazla yerleri gidecek.

Şöyle anlatayım size. Bunu yapmanın bir çok yolu var. Ben bir kaç tanesini lojik olarak anlatayım size.
1.

Burada ne yaptık dış div'e sabit boyut verdik ve arta kalan kısımları kestik ki ben pek önermiyorum.
2.

Burada ne yaptık. Bir div oluşturduk ve resmi dive arkaplan resmi olarak verdik ve resmi dikey ve yatay ortalaması istedik. 1.center yerine left yazarsak soldan başlar vs

3.

size:contain kullanırsakta resmi dive çok güzel bir şekilde oranlayıp ekler ki bence güzel olur. Yada size:cover olarak deyenebilirsiniz hangisi hoşunuza giderse.

4. Bu yol ise php olarak bir çözüm üretiyor.
Veritabanından gelen resmin width ve height değerlerini alıyorsunuz.
genişliği yüksekliğe bölüyorsunuz eğer ki sonuç 1 den büyük çıkarsa resim yatay küçük çıkarsa resim dikeydir. Daha sonra bu sonuca göre if else ile css kuralı belirleyebilirsiniz.
Not: Background resim eklersen no-repeat tanımlamayı unutmayınız.
Not:2 4. çözüm yolunu da her yerde göremezsiniz :)
Not3: Derleyicide yazmadım ufak noktalama harf hataları olabilir yeni uyandım artık onları da siz halledersiniz :)


Umarım yardımcı olabilmişimdir :)
Çalışmalarınızda başarılar dilerim.

Merhaba çok güzel cevaplamışsınız. Acaba 4 Nolu şık için kaynak söyleyebilir misiniz? bence en güzel mantık 4 nolu şık oluyor.

Hocam yanlışınız var overflow:hidden özelliği kapsayıcı sınıfın 4 kenardaki taşmaları da gizler. Sanırım kapsayıcı divinizi seçerken yanlıi seçiyorsunuz. Öğeyi denetle alanında resmin taşmasını emgellemek istediğiniz alanı tamamen kapsayan elementi bulun ve direk overflow:hidden verin.

Notunuzu yeni okudum mobilim k.bakmayın, çok basit bir olay;

.cerceve{
width:100px;
height100px;
}
.cerceve img{
widht:100%;
height:100%;
object-fit:cover;
}