Jak mogę dopasować obrazy do kwadratu o wielkości 200 pikseli za pomocą CSS?

Question

Mam kilka obrazów, które pasują do pudełka o wymiarach 400 x 400 pikseli (czyli jeden z ich wymiarów to 400 pikseli, a drugi jest mniejszy). Chciałbym móc, używając CSS, ale w razie potrzeby użyć jquery/javascript, dopasować ten obraz do pudełka o wymiarach 200 na 200 pikseli, tak aby dwie krawędzie obrazu dotykały pudełka, a między pozostałymi dwoma krawędziami jest przerwa. pudełko. Współczynnik proporcji musi być zachowany.

Moje HTML jest w następujący sposób:

<div class="small"> 
    <img src="/images/photos/View.jpg" alt="View" /> 
</div> 

A mój CSS:

div.images div.small 
{ 
    width:200px; 
    height:200px; 
    line-height:200px; 
    text-align:center; 
} 
div.images div.small img 
{ 
    vertical-align:middle; 
    max-width:200px; 
    max-height:200px; 
} 

można zobaczyć próbkę here.

Niestety, moje zdjęcia krajobrazowe mieszczą się na górze pudełka, podczas gdy ja chciałbym, aby były wyśrodkowane. Ponadto, nie jestem pewien mądry opierając się na max-width/max-height.

Jak mogę wyśrodkować moje obrazy w tych polach?

Answer 1

Ustawiłem to na moim komputerze i działało dobrze. Po obejrzeniu przykładowej strony problem polega na tym, że ustawiono obraz na display:block. Albo usunąć tę zasadę ze swojego ogólnego img reguły (dziwne ustawić globalnie, tak), lub zmienić regułę obrazu przy zamieszczonych powyżej to:

div.images div.small img 
{ 
    vertical-align: middle; 
    max-width: 200px; 
    max-height: 200px; 
    display: -moz-inline-box; /* Firefox 2 */ 
    display: inline-block; 
} 

domyślnie element img i innych „zastąpiono” elementy (Flash, itp.) Są "inline-block" - oznacza to, że przepływają one liniowo jak tekst, ale mają szerokość i wysokość.

Answer 2

próbowałeś za pomocą:

display:block; 
margin-left:auto; 
margin-right:auto; 

że należy skupiać elementy poziomie bloku

Answer 3

muszę zrobić to samo jakiś czas temu, i znalazłem dobrą realizację w this link. "Wyśrodkuj obraz wewnątrz elementu div, pionowego i poziomego, nie znając rozmiaru obrazu".

Działa dla mnie zgodnie z przeznaczeniem.

Answer 4

wpadłem na tego problemu centrowania pionowego raz i aby to działa poprawnie we wszystkich przeglądarkach, że uciekają się do JavaScript/jQuery:

$(document).ready(function() { 
    $('img').each(function() { 
     image_height = $(this).height(); 
     margin_top = (200 - image_height)/2; 
     $(this).css('margin-top', margin_top + 'px'); 
    }); 
}); 

Należy pamiętać, że trzeba będzie $ (okno) .load zamiast $ (dokument) .ready, jeśli wymiary obrazu nie są podane w html.

Answer 5

Oto rozwiązanie, które działa bez względu na rozmiar. Zmniejszy się, ale nie podniesie, wyśrodkuje zarówno w pionie, jak iw poziomie i używa tylko CSS. Zajęło mi trochę czasu, aby to rozgryźć.

Umieść swój <img> wewnątrz <div>, a następnie umieść element div tak, jak chcesz (tj., Nadać mu żądany rozmiar, należy ustawić atrybut position), a następnie zastosować to:

.mydiv > .myimg { 
    vertical-align: bottom; 
    max-height:  100%; 
    max-width:  100%; 
    position:  absolute; 
    margin:   auto; 
    top:   0; 
    right:   0; 
    bottom:   0; 
    left:   0; 
}