object-fit özelliğini kullanabilirsin
object-fit: none | contain | fill | scale-down | inherit | initial | revert | revert-layer | unset
bilmen gereken şu üçü
- contain, en boy oranını korurken objeyi konteynera sığdırmaya çalışır - konteyner ile objenin en boy oranı tutmuyorsa. konteyner içinde boşluklar kalabilir.
- cover, en boy oranını korurken objenin konteyneri tamamen kaplamaya çalışır - konteyner ile objenin en boy oranı tutmuyorsa obje konteynerin dışına taşabilir.
- fill, en boy oranı korunmaz, konteyner tamamen doldurulur - en boy oranı korunmadığından obje basık yada çekik olabilir
resimin container icinde tasmadan tamamının görüntülenmesi için
#post-photo {
object-fit: contain
}
https://developer.mozilla.org/en-US/docs/Web/CSS/object-fit?retiredLocale=tr