Ekran Boyutuna göre Nesne Görüntüsü

Merhaba,
Kodladığım bir tasarım var. Bu tasarımın 1920 ekranda kenarlara eklediğim bir görüntünün 1300 ekranda azalmasını istiyorum.
Kenardaki resimleri tamamen kaldırmak istemiyorum. Ekranı küçülttükçe görüntünün küçülen alan kadar gizlenmesini istiyorum.
Bu resimleri position: absolute ile ekranın bazı noktalarına sabitledim, left:0 verdim. O yüzden ekran küçültükçe bu resim içeri giriyor, gizlenmiyor.
Nasıl yapabilirim?

.resim{ width: 600px; }

@media only screen and (min-width: 0px) and (max-width: 1300px) {
.resim{ width: 300px; }
}
en üstte resim 600 piksel iken, media içine yazılmış kriterler ile de resim 300 piksel oluyor... (değerler temsili olarak yazılmıştır... duruma göre oynama yaparsınız...)
göster/gizle yapmak için de üst tarafa display: block; ve media içindeki alana da display: none; yazmalısınız...

Teşekkür ederim ancak yapmak istediğim şey küçültmek değil. Ekran küçüdükçe fazla olan kısmın görünmemesini sağlamak, tamamen nesneyi gizlemek de değil

bunun için bir görsel olmadan yardım edilmesi çok zor, görmeden kod yardımı bekliyorsunuz, dolayısıyla sonuca da ulaşamazsınız...

Aşağıdaki kod işinizi görür. Nedir bu derseniz. .kapsa adında bir div olusturdum ve bunun genişliğini ekranın yüzde 90'ı olsun dedim ama max genişliğide 1300px olsun dedim. Ne olacak peki 1920 li ekranda div'im max 1300px olacak ve ortada olacak ama 1300px altında da ekranın %90'ını kaplayacak genişlik olarak ve yine ortada olacak.

.kapsa {
margin:0px auto;
width:90%;
max-width:1300px;
}

Teşekkür ederim.