CSS'de yeniden boyutlandırılabilir bir görüntüyü ortalamak

Question

Bir görüntüyü belirli bir div'in tam ortasına ortalamaya çalışıyorum. Görüntü, orijinal en boy oranını korumalı, aynı zamanda tarayıcıların genişliğine ve boyuna bağlı olarak büyümeli ve küçülmelidir.

Daha kesin olmak gerekirse: kap tüm pencereyi doldurur, her iki tarafında 100 px'lik bir dolguya sahiptir. Konteynerin içinde, en boy oranına bağlı olarak, bu pedli div'i yatay veya dikey olarak dolduran bir görüntüdür. Ve sonunda, bu görüntünün merkezinde konumlandırılmış olmalı. Ben yeterince açık umut

main { 
 

 
} 
 

 
main figure { 
 
    display: flex; 
 
    justify-content: center; 
 
    margin: 0; 
 
    padding: 100px; 
 
    height: calc(100vh - 200px); 
 
} 
 

 
main figure img { 
 
    display: block; 
 
    margin: auto; 
 
    max-width: 100%; 
 
    max-height: 100%; 
 
    width: auto; 
 
    height: auto; 
 
}

<main> 
 
    <figure> 
 
     <img src="https://msdnshared.blob.core.windows.net/media/TNBlogsFS/prod.evol.blogs.technet.com/CommunityServer.Blogs.Components.WeblogFiles/00/00/01/03/07/uno.jpg" /> 
 
    </figure> 
 
</main>

:

İşte benim kod. Yardım ettiğin için teşekkür ederim!

Answer 1

1. aşağıdaki CSS sahip olmasını img öğenin hazırlanması position:relative

2. için sarıcı eleman ayarlayın:

   img{ 
       position:absolute; 
       top:50%; 
       left:50%; 
       transform:translate(-50%,-50%); 
   } 
   

Bu sarmalayıcı merkezinde resmi doğrudan merkez alacaktır.

Answer 2

Duyarlı web tasarımını destekleyen önyükleme çerçevesini kullanmayı düşünün. Img-responsive sınıfını kullanarak, görüntüyü tarayıcı genişliğine ve yüksekliğine duyarlı hale getirebileceksiniz.

İşte görüntüye img-duyarlı sınıf eklemek görüntü ve dolgu ortalamak için HTML

Yaz CSS önyükleme CSS Dahil HTML önyükleme JavaScript dahil önyükleme yanıtı veren görüntü için bir örnektir. http://www.w3schools.com/bootstrap/tryit.asp?filename=trybs_ref_img-responsive&stacked=h