responsive css resim crop

29-02-2020, 22:27:50

resimin responsive şekilde sağdan sola doğru kırpılmasını istiyorum.

resim orjinal boyut diyelim 960x 250px olsun diyelim.

siteye bakılan ekranın çözünürlüğü 1920x1080 olsun

tarayıcı penceresi genişliği 660px e el ile getirildiğini düşünelim.

otomatik olarak resmin yüksekliği bozulmadan sadece genişliği sağdan sola kırpılmasını istiyorum.

29-02-2020, 22:31:02

#2

~~Maize~~

Üyeliği durduruldu

@media (max-width:800px) {
.bccontainerr {
display:none !important;
} }

29-02-2020, 22:31:11

#3

~~Lynit~~

Üyeliği durduruldu

@media screen and (max-width: 992px) {
   img {
      max-width: 300px
       }
}

şeklinde kullanabilirsin, 1024 yaparsan 992'yi ipad pro'yuda içine alır komut.

29-02-2020, 22:40:05

#4

buddy

Maize adlı üyeden alıntı: mesajı görüntüle

@media (max-width:800px) {
.bccontainerr {
display:none !important;
} }

Lynit adlı üyeden alıntı: mesajı görüntüle

@media screen and (max-width: 992px) {
   img {
      max-width: 300px
       }
}

şeklinde kullanabilirsin, 1024 yaparsan 992'yi ipad pro'yuda içine alır komut.

malesef ikiside ekranı sağdan sola doğru küçültürken resim de küçülüyor.

istediğim pencereyi sağdan sola doğru çekerken resmin sağdan sola doğru kırpılması. boyutlar aynı kalacak yani anlatabildim mi tam olarak bilemedim

02-03-2020, 10:20:58

#5

buddy

buddy adlı üyeden alıntı: mesajı görüntüle

resimin responsive şekilde sağdan sola doğru kırpılmasını istiyorum.

resim orjinal boyut diyelim 960x 250px olsun diyelim.

siteye bakılan ekranın çözünürlüğü 1920x1080 olsun

tarayıcı penceresi genişliği 660px e el ile getirildiğini düşünelim.

otomatik olarak resmin yüksekliği bozulmadan sadece genişliği sağdan sola kırpılmasını istiyorum.

bu şekilde tekrar özetledim. nasıl yapabilriz?

02-03-2020, 12:40:33

#6

soxiety_

Şöyle yapabilirsiniz; Belli bir çözünürlükten önce, diyelim 768px den önceki çözünürlüklerde;

Resminizi bu çözünürlük aralıgında olmasını istediginiz gibi photoshop da kırpın. ve ikinci resim olarak ekleyin. 768 den önce kırptıgınıza display:block, ilk resme display:none verin, 768 den sonra ise bunun tam tersini yapın.

02-03-2020, 13:46:03

#7

buddy

soxiety_ adlı üyeden alıntı: mesajı görüntüle

Şöyle yapabilirsiniz; Belli bir çözünürlükten önce, diyelim 768px den önceki çözünürlüklerde;

Resminizi bu çözünürlük aralıgında olmasını istediginiz gibi photoshop da kırpın. ve ikinci resim olarak ekleyin. 768 den önce kırptıgınıza display:block, ilk resme display:none verin, 768 den sonra ise bunun tam tersini yapın.

hocam zamanında bir sitede yapmıştım. Buna gerek duymadan. Ama o zaman nasıl yaptım hatırlamıyorum elimde bir kod var eskiden ama o da çalışmadı. Yabancı kaynaklarda da bulamıyorum ama var öyle birşey eminim. Yabancı kaynakalrda nasıl olmaz aklım almadı

02-03-2020, 14:20:54

#8

dnaz

Bunun için overflow ve eksi margin değerini beraber kullanmalısınız tabi bunları istediğiniz media-width değeri icinde yapmalisiniz