Tworzenie wszystkich zdjęć za pomocą css

Question

Próbuję zrobić serię zdjęć na kwadratowe zdjęcia. Mogą być prostokątne w poziomie (tj. 600 x 400) lub pionowo (400 x 600), ale chcę je uzyskać w obu kierunkach odpowiednio 175 x 175. Myślałem o maksymalnej wysokości lub maksymalnej szerokości na mniejszej stronie i nie pozwalam na przepełnienie powyżej 175 pikseli na większej stronie ... jednak mam z tym problemy.

Czy to możliwe z css?

Poniżej moja próba, ale nadal daje prostokąty:

<div style="min-height:175px; overflow:hidden; max-height:175px;"> 
<img style="min-width:175px; overflow:hidden; max-height:175px;" src="/photo.png"> 
</div> 

Answer 1

Gorąco sugeruję wtyczkę jQuery NailThumb dla każdego, kto chce to zrobić. Pozwala tworzyć kwadratowe miniatury bez zniekształceń. http://www.garralab.com/nailthumb.php

Answer 2

Można ustawić szerokość/wysokość div następnie ustawić znacznika img dziecko do szerokości: 100%; height: auto;

Spowoduje to przeskalowanie obrazu, aby dopasować rodzica do proporcji obrazu.

Możesz również ustawić obraz jako obraz tła na div . Jeśli możesz użyć css3, możesz zepsuć właściwość background-size. To atrybutami są: zawierać pokrywę lub specificed wysokości (50%, 50%) (175px, 175px) Można także spróbować wycentrowanie obrazu z tła pozycji

<div style="background-image:url(some.png); background-size: cover; background-position: 50%"> 

Answer 3

To może pomóc.

CSS:

.image{ 
-moz-border-radius: 30px; /* FF1+ */ 
-webkit-border-radius: 30px; /* Saf3-4 */ 
border-radius: 30px; /* Opera 10.5, IE 9, Saf5, Chrome */ 
} 

HTML:

<div class="image"></div> 

Ten pracował dla mnie. Po prostu wpisz adres URL do obrazu wewnątrz elementu div.

Answer 4

OK, mam to.

Nie wiem, czy jest za późno, czy co, ale udało mi się stworzyć w 100% czysty sposób tworzenia kwadratowych miniatur CSS. To jest coś, na co próbowałem znaleźć rozwiązanie od dłuższego czasu i nie miałem szczęścia. Z niektórymi eksperymentami, mam to działa. Główne dwa atrybuty do zastosowania to PRZEPEŁNIENIE: UKRYTY i WIDTH/HEIGHT: AUTO.

Ok oto co należy zrobić:

Powiedzmy masz partię zdjęć o różnych kształtach i rozmiarach, jakiś krajobraz, jakiś portret, ale wszyscy, oczywiście, prostokątnym. Pierwszą rzeczą do zrobienia jest podzielenie linków graficznych (miniatur) na portret lub krajobraz za pomocą selektora klasy. Okej, powiedzmy, że chcesz utworzyć dwie miniatury, aby to ułatwić. masz:

img1.jpg (portret) i img2.jpg (Pejzaż)

HTML to wyglądać tak:

<a class="portrait" href="yoursite/yourimages/img1.jpg"><img src="yoursite/yourimages/img1.jpg /></a> 
<a class="landscape" href="yoursite/yourimages/img2.jpg"><img src="yoursite/yourimages/img2.jpg /></a> 

tak, to w tym momencie, ponieważ nie ma css jednak powyższy kod dałby obraz w pełnym rozmiarze jako miniaturę, która łączyłaby się z tym samym pełnowymiarowym obrazem.Racja, więc tutaj jest css dla portretu i krajobrazu. Istnieją dwie deklaracje dla każdego (link i link za obraz):

.landscape { 
     float:left; 
     width:175px;  
     height:175px;  
     overflow:hidden;  
    } 

.landscape img{ 
     width:auto; 
     height: 175px; 
    } 

.portrait { 
     float:left; 
     width:175px; 
     height:175px; 
     overflow:hidden;  
    } 

.portrait img { 
     width:175px; <-- notice these 
     height: auto; <-- have switched 
    } 

Najważniejsze rzeczy są szerokość i wysokość i overflow: hidden. Pływak w lewo nie jest konieczny, aby to działało.

W deklaracji miniatury krajobrazu (.landscape) ramka ograniczająca jest ustawiona na 175 x 175, a przelew jest ustawiony jako ukryty. Oznacza to, że wszelkie informacje wizualne większe niż te zawierające kwadrat 175px zostaną ukryte.

W przypadku deklaracji obrazu krajobrazowego (.landscape img) wysokość jest ustalona na 175 pikseli, co zmienia wysokość oryginalną, a szerokość jest ustawiona na wartość auto, która zmienia rozmiar oryginału, ale tylko do punktu odnoszącego się do ograniczający kwadrat, który w tym przypadku wynosi 175 pikseli. Zamiast więc zmniejszać szerokość w dół do kwadratu, po prostu wypełnia kwadrat, a następnie wszelkie dodatkowe informacje wizualne o szerokości (tj. Przepełnieniu) są ukryte przy przepełnieniu: ukryte.

Działa to w ten sam sposób, co portret, tylko szerokość i wysokość są przełączane, gdzie wysokość jest automatyczna, a szerokość - 175 pikseli. Zasadniczo w każdym przypadku, niezależnie od wymiaru, który przewyższa drugi, ustawiany jest tryb automatyczny, ponieważ oczywiście większym wymiarem byłby ten, który przepełniałby się poza ustawionymi wymiarami miniatur (175 pikseli x 175x).

A jeśli chcesz dodać marginesy między kciukami, na przykład biały margines 5 pikseli, możesz użyć właściwości border, w przeciwnym razie nie będzie marginesu, gdy informacje są przepełnione.

Mam nadzieję, że to ma sens.

Answer 5

Określa szerokość i wysokość obrazu, a następnie aktywną klasę pionową lub poziomą obrazu. Jeśli portret ma {height:175px; width:auto}. Jeśli krajobraz, odwróć wysokość i szerokość.