Witam. mam pytanie dot. zdjęć na stronie aby były responsywne.

pytanie zadane 3 maja 2021 w HTML i CSS przez grewwwew Użytkownik (830 p.)

Mam 3 zdjęcia do utworzenia na stronie tak aby były responsywne musi być minimalny rozmiar każdego zdjęcia oraz muszą się one wyświetlać obok siebie wszystkie 3. Robiłem już cuda overflow, display, vertical-align, max witdh/height oraz min width/height. Jeśli ktoś chciałby pomóc to z góry dziękuję :)
Ps. zdjęcia są w tabeli

komentarz 3 maja 2021 przez niezalogowany

podeślij kod proszę będzie nam łatwiej ..

komentarz 4 maja 2021 przez grewwwew Użytkownik (830 p.)
edycja 4 maja 2021 przez ScriptyChris

<!DOCTYPE html>

<html lang="pl-PL">

    <head>

        <title>Samochody Przyszłości</title>

        <meta charset="utf-8">

        <meta name="viewport" content="width=device-width, initial-scale=1">

        <link rel="stylesheet" href="stylob.css">

    </head>

<body>

<table>

        <tr>

            <td>

            <img class="pierwszy" src="auto1.jpg" alt="samochód mercedes">

            <p>Pierwszy futurystyczny(przyszłościowy) samochód Mercedes-Benz</p>

            </td>

            <td>

            <img class="drugi" src="auto2.jpg" alt="samochód także mercedesa">

            <p>Drugi futurystyczny(przyszłościowy) samochód Mercedes-Benz</p>

            </td>

            <td>

            <img class="trzeci" src="auto3.jpg" alt="samochód bmw">

            <p>futurystyczny(przyszłościowy) samochód BMW</p>

            </td>

        </tr>

    </table>

</body>

</html>

 * {

  background-color: #eaeaea;

  overflow: hidden;

}

 

.container {

  padding-top: 40rem;

}

 

.pierwszy {

  display: block;

  max-width: 600px;

  max-height: 300px;

  min-height: 100px;

  min-width: 100px;

}

 

.drugi {

  display: block;

  max-width: 600px;

  max-height: 300px;

  min-height: 100px;

  min-width: 100px;

}

 

.trzeci {

  max-width: 600px;

  max-height: 300px;

  min-height: 100px;

  min-width: 100px;

}

Póki co tak kod wygląda ://

2 odpowiedzi

odpowiedź 4 maja 2021 przez niezalogowany

https://www.freecodecamp.org/news/css-responsive-image-tutorial/

Tutaj masz Fajny artykuł możesz sobie poczytać.

raczej unikałbym tabeli ...w tym przypadku...

Tutaj masz przykład kodu responsywnego zdjęcia.Oczywiście to tylko przykład wyrwany z kontekstu.

.responsive-image {
  height: auto;
  width: 100%;
}

Powodzenia i Pozdrawiam

Wstawiaj kod w odpowiednie bloczki

komentarz 7 maja 2021 przez grewwwew Użytkownik (830 p.)

w tym jest problem że muszę użyć min-height i min width chyba, bo piszę że mam określić minimalny rozmiar każdego zdjęcia

odpowiedź 3 maja 2021 przez SzkolnyAdmin Szeryf (90,350 p.)

Podobne pytania

0 głosów

2 odpowiedzi 1,377 wizyt

HTML/CSS - Jak ustawić 3 Div'y (float: left;) tak aby były zawsze na szerokość przeglądarki?

pytanie zadane 18 kwietnia 2016 w HTML i CSS przez Pablo99 Obywatel (1,110 p.)

0 głosów

3 odpowiedzi 797 wizyt

Jak zrobić, aby komórki w tabeli były identycznej szerokości i/lub wysokości, gdy strona jest responsywna?

pytanie zadane 15 czerwca 2020 w HTML i CSS przez SCpl Użytkownik (590 p.)

–1 głos

2 odpowiedzi 336 wizyt

Jak zrobić aby tylko litery były hiperłączem?

pytanie zadane 1 maja 2017 w HTML i CSS przez Vorex444 Dyskutant (9,610 p.)

Witam. mam pytanie dot. zdjęć na stronie aby były responsywne.

Zaloguj lub zarejestruj się, aby skomentować.

Zaloguj lub zarejestruj się, aby odpowiedzieć na to pytanie.

2 odpowiedzi

Zaloguj lub zarejestruj się, aby skomentować.

Zaloguj lub zarejestruj się, aby skomentować.

Podobne pytania

O działaniu forum

Pasja informatyki w internecie

Polecane miejsca w sieci