Jak wyświetlić responsywnie zdjęcia z bazy danych ?

Cześć! Wyświetlam zdjęcia z bazy danych i niestety ale mam problem z ich responsywnośćią. Mam diva o id test, a w nim zdjęcie. Niestety ponizszy kod sprawia ze kazde zdjecie jest innego rozmiaru, a chcę aby każde było takie same. Czy ktoś może podowiedziec gdzie popełniam błąd ?

<main>
        <div class='container'>
            <div class='row'>
        <?php
        $displayPhoto = $photoDisplaying->DisplayPhoto();
        ?>
        </div>
        </div>
    </main>


echo "<div class=' col-12 col-sm-6 col-md-4 col-lg-4 col-xl-3 bg-primary' id='test'>";
                    echo "<img src='".$row['photo']."' style='border:4px solid white'  />";
   echo "</div>";


#test{
    margin-bottom: 60px;
    width:300px;
    height:300px;
}

img{
    max-width:100%;
    max-height:100%;
    border: 3px solid white;

}

veks21 napisał(a):

kazde zdjecie jest innego rozmiaru, a chcę aby każde było takie samo.

Takie samo, jak co?

Aby każde zdjęcie miało taki sam rozmiar

Ale co "taki sam rozmiar" oznacza?
Że mają być takie, jak pierwsze foto? Że chcesz narzucić odgórnie jakiś rozmiar i do niego ma to być dopasowane? Czy skalowanie w obie strony Cię interesuje, czy np. tylko pomniejszanie, ale jeśli foto jest za małe to je przekazać takie, jak jest?

Poza tym - jeśli te zdjęcia mają być wyświetlane w określonym rozmiarze i będzie się to działo w miarę regularnie, to moim zdaniem lepiej dodać jakiś mechanizm, który zapisze na serwerze dwie wersje - oryginalną i przeskalowaną, a potem pobierać do wyświetlenia wersję przeskalowaną .Jeśli rozmiar znasz, to możesz sobie je od razu przerobić, a jest to opcja o wiele bardziej wydajna, niż skalowanie za każdym razem podczas pokazywania obrazka. Zgodnie z moją propozycją - skalujesz tylko raz, a potem jedynie wyświetlasz obrazek już pomniejszony.

img{
    width:100%;
    height:100%;
 }

Zadziałało, tylko mniejsze zdjęcia są rozciągnięte i brzydko to wygląda, czy jest na to jakiś sposób ?

veks21 napisał(a):

Zadziałało, tylko mniejsze zdjęcia są rozciągnięte i brzydko to wygląda, czy jest na to jakiś sposób ?

Rozciągnięte w znaczeniu, że im się zepsuły proporcje długości boków?
-> zostawić samo: width:100%;

Czy w znaczeniu, że widać pikselozę?
-> użyć większych zdjęć.

Widać pikselozę, jak to użyć większych zdjęć ? To jest aplikacja gdzie użytkownik dodaje zdjęcia więc jak mam uzyc wiekszych zdjęc ?

To musisz przekonać użytkownika.

@Freja Draco:

albo samemu przeskalować pod spodem do pożądanych rozmiarów, chyba?

@veks21 ale w sumie jakiego efektu oczekujesz? Wyświetlenie oryginalnego rozmiaru ci się nie podoba, mówisz ze ma się przeskalować do 200x200, ale nie podoba ci się że teraz jest rozciągnięte :D Możesz pokazać kilka przykładów jaki efekt chciałbyś osiągnąć? Szczególnie w sytuacji kiedy:

• użytkownik wrzuca prostokątne zdjęcie (np. 200x50)
• Użytkownik wrzuca bardzo małe zdjęcie (np. 10x10)

Jak to by miało wg ciebie wyglądać na twojej stronie?

@Shalom: Dobra, chyba najlepszym rozwiązaniem jest przeskalowanie zdjęć do 200x200. Tylko pojawił się inny problem, gdy mam rozmiar okna przeglądarki mniejszy od 540px, to zdjęcie zajmuje 12 kolumn, tylko ze po prawej stronie jest większy margines, czy padding, który sprawia że mogę przesuwać paskiem stronę w lewą i prawą.

veks21 napisał(a):

zdjęcie zajmuje 12 kolumn

Prawdopodobnie używasz bootstrapa. Prawdopodobnie zupełnie niepotrzebnie, a już prawie na pewno w nieprawidłowy sposób.

Przeniosłem do odpowiedniego działu, to nie ma związku z programowaniem, a zwłaszcza z innymi językami programowania.

Samo wstawianie zdjęcia na stronę WWW to wcale nie jest oczywista sprawa a w rzeczywistości RWD dodatkowo komplikuje się i to mocno...
Niestety na pytanie jak wstawić zdjęcie w RWD, "żeby było dobrze" nie ma jednej odpowiedzi ani nawet nie da się napisać "jak zrobić to dobrze".
Cały proces wstawiania zdjęcia na stronę niemal zawsze składa się z części po stronie serwera jak i po stronie klienta. Po obu stronach trzeba wykonać czynności, które doprowadzą nas do zamierzonego celu.

Po stronie serwera::

Generalnie na przykładzie np. strony pisanej w PHP nie obejdzie się bez wspomagającej biblioteki, która potrafi przynajmniej skalować zdjęcia w trybach:

1. wymuszone skalowanie do określonego rozmiaru dopuszczające zniekształcenie ( raczej rzadko używane )
2. stała szerokość ;
3. stała wysokość ;
4. cropping ( przy podaniu wymiarów i automatycznym dopasowaniu do krótszej krawędzi ) ;
5. ( dodatkowy bajer ) cropping inteligentny czyli taki, który potrafi wyszukać "istotny" fragment zdjęcia - często stoją za tym algorytmy sztucznej inteligencji ;

Taką bibliotekę można napisać samemu lub korzystać z gotowych. Ja korzystam z własnej jednak nie mam w niej croppingu inteligentnego... Do podstawowego szczęścia jednak wystarcza.
Taka biblioteka bezwzględnie musi obsługiwać także różne mechanizmy cacheo'wania bo:

• nie można skalować oryginału zdjęcia przy każdym wywołaniu strony ;
• nie warto wielokrotnie pobierać zdjęcia ze źródła ;
• nie warto trzymać cache tego samego zdjęcia wiele razy...

Żeby było mało to samo skalowanie nie powinno się odbywać w czasie generowania strony, a dopiero po przyjściu żądania o konkretne zdjęcie co zmusza nas do tworzenia odpowiednich plików "tymczasowych" zawierających informacje o docelowym zdjęciu a samo skalowanie, cacheowanie i przygotowanie zdjęcia w odpowiednim rozmiarze następuje dopiero po przyjściu żądania z przeglądarki... zatem trzeba jeszcze użyć np. .htaccess.

Warto też wiedzieć, że są specjalne płatne serwisy udostępniające API, które te czynności za nas wykonują włącznie z kompresją bazującą na AI ( sam PHP z libGD tak optymalnych rozmiarów nie uzyska ). Przykłady: www.contentful.com, cloudinary.com. Gdy pracujemy na dużych bazach zdjęć to rzecz warta uwagi...

No to serwer załatwiony a teraz przeglądarka :-)

Nawet jeśli już mamy wstępnie przygotowane odpowiednie zdjęcie po stronie serwera to nasza zabawa z wstawianiem zdjęcia wcale nie dobiegła do końca bo zdjęcie trzeba odpowiednio wyświetlić w kontenerze, w którym jest umieszczone, a ten może być raz szerszy raz wyższy, natomiast samo zdjęcie jakoś musi się prezentować. Na szczęście CSS daje już wiele sposobów pozycjonowania zdjęcia względem swojego kontenera i to już dużo ułatwia ale i tak tych sposobów jest dużo więc zawsze różnie można do sprawy podejść.

**Na koniec optymalizacja **... czyli tak naprawdę po stronie serwera czasem trzeba przygotować więcej niż jedno zdjęcie a to dlatego, że będziemy je wyświetlać w różnym układzie i w różnych rozdzielczościach zatem nie ma sensu pchać banera 1920px do klienta, który ma szerokość 320px...

No i na koniec dodam, że osobiście jestem zwolennikiem korzystania z mechanizmu "lazyLoad" bo to też daje widoczne oszczędności po stronie serwera.

To tak drogą wstępu i ogólnego nakreślenia tematu ;-)
Myślę, że na ten temat można by napisać dość długi i ciekawy artykuł...