Farklı masaüstü ve mobil görüntülemeler için resimleri yeniden boyutlandırma

Question

Her iki görünümde de sırasıyla sabit bir yüksekliğe sahip masaüstü görünümü ve mobil görünüm için aşağıdaki gibi görüntülerin bulunduğu bir yapıya sahibim. mobil görünüm görüntülerde

gergin çıkıyor. Görüntülerin üst, alt, sol ve sağdan kırpıldığı ve benim durumumda istemediğim birkaç çözüm uyguladık. Resimlerin herhangi bir görünümde esnetmemesi için nasıl devam etmeliyim?

Answer 1

, daima zorlamadan ile eleman dolduracak resim yapmak background-image/background-size kullanmak ve bu

background: url(...) no-repeat;  /* the shorthand property */ 
background-size: cover; 
background-position: center center; 

cover değeri gibi ayarlayabilirsiniz size (resminizin olduğu gibi) sabit bir düzen istiyoruz varsayarsak background-position bir görüntü merkezli gerekip gerekmediğini, sol, sağ, alt, üst hizalanmış kontrol edebilirsiniz

div { 
 
    height: 200px; 
 
    width: 500px; 
 
    background: url(http://lorempixel.com/300/400/animals/4) no-repeat; 
 
    background-size: cover; 
 
    background-position: center center; 
 
    border: 1px solid black; 
 
} 
 
div ~ div { 
 
    height: 200px; 
 
    width: 200px; 
 
} 
 
div ~ div ~ div { 
 
    height: 500px; 
 
    width: 200px; 
 
    background-position: left center; 
 
}

<div></div> 
 
<div></div> 
 
<div></div>

Kırpmak istemiyorsanız, bunun yerine background-size: contain kullanabilirsiniz.

div { 
 
    height: 200px; 
 
    width: 500px; 
 
    background: url(http://lorempixel.com/300/400/animals/4) no-repeat; 
 
    background-size: contain; 
 
    background-position: left bottom; 
 
    border: 1px solid black; 
 
} 
 
div ~ div { 
 
    height: 200px; 
 
    width: 200px; 
 
} 
 
div ~ div ~ div { 
 
    height: 500px; 
 
    width: 200px; 
 
}

<div></div> 
 
<div></div> 
 
<div></div>

güncelle arka boyutu olan bir img

html, body { 
 
    margin: 0; 
 
    height: 100%; 
 
} 
 
img { 
 
    height: 40%; 
 
    width: auto; 
 
}

<img src="http://lorempixel.com/200/400/animals/4" alt=""> 
 
<img src="http://lorempixel.com/300/300/animals/4" alt=""> 
 
<img src="http://lorempixel.com/400/200/animals/4" alt="">