CSS En boy oranını sığdırmak ve korumak için nasıl uzanıyorsunuz?

Question

Aşağıdaki css vardır:

bu HTML tekabül

.mod.left { 
background-image: url("http://www.myimage.jpg"); 
display: block; 
height: 160px; 
overflow: hidden; 
width: 175px; 
} 

:

Bu karmaşa içinde sonuçlanır

<div class="mod left"></div> 

:

Ben css3 Geçmiş- kullanırsanız boyut: 175px 160px; en boy oranı gerçekten böyle bir karmaşa içinde sonuçlanan berbat:

bir div uyacak şekilde bir görüntü germek için bir yolu var mı? Ancak en boy oranının korunacağı bir şekilde mi? Otomatik mahsul istiyorum.

Answer 1

Bu (background-size destekleyen tarayıcılarda) çalışması gerekir:

background-size: cover; 

Veya:

background-size: 175px auto; 

Şunu da deneyebilirsiniz

background-size: contain; 

There's a good explanation on MDC.

Answer 2

Arka plan görüntüsü olmak zorunda mı?

img{ 
width:300px; 
height:auto; 
} 


<img src="your-photo.png"> 

Answer 3

Sen contain değerle background-size özelliğini kullanabilirsiniz:

İşte

background-size: contain; 

çalışan bir örnektir: Yukarıdaki örnekte https://jsfiddle.net/gusrodriguez/auuk97hf/1/

, vücut arka planda bir gerilmiş imajı vardır. Ayrıca keyfi büyüklükte iki div ve en boy oranına uyan ve saklayan başka bir görüntü var.