Eğer farklı bir boyut oranı varsa bile belirli bir genişlik ve yükseklik ile bir URL bir görüntü göstermek istiyorum. (Oranını koruyarak) ve istediğim boyuta görüntüyü yeniden boyutlandırmak sonra kesmek istiyorum.

img html özellik ile yeniden boyutlandırma ve background-imageile kesebilirim.
İkisini aynı anda nasıl yapabilirim?

Örnek:

Bu resim:

Olan boyutu 800x600 piksel 200x100 piksel bir görüntü gibi göstermek istiyorum

img 11 ** resmi yeniden boyutlandırmak olabilir:

<img 
    style="width: 200px; height: 150px;" 
    src="http://img1.jurko.net/wall/paper/donald_duck_4.jpg">

Bana bu verir:

<img style="width: 200px; height: 150px;" src="http://img1.jurko.net/wall/paper/donald_duck_4.jpg">

background-image görüntü 200x100 piksel kesebilirim.

<div 
    style="background-image:
           url('http://img1.jurko.net/wall/paper/donald_duck_4.jpg'); 
    width:200px; 
    height:100px; 
    background-position:center;"> </div>

Verir bana

<div style="background-image:url('http://img1.jurko.net/wall/paper/donald_duck_4.jpg'); width:200px; height:100px; background-position:center;"> </div>

İkisini aynı anda nasıl yapabilirim?
Resmi yeniden boyutlandırmak ve istediğim büyüklükte kesilmiş?

Her iki yöntem bir arada eg kullanabilirsiniz.

<div class="crop">
    <img src="..." alt="..." />
</div>

CSS:

.crop {
    width: 200px;
    height: 150px;
    overflow: hidden;
}

.crop img {
    width: 400px;
    height: 300px;
    margin: -75px 0 0 -100px;
}

Negatif margin görüntü etrafında <div/> içinde taşımak için kullanabilirsiniz.