Skalowanie obrazu w CSS

pytanie zadane 15 grudnia 2021 w HTML i CSS przez shtemp Nowicjusz (130 p.)

Nie skaluje się obraz za pomocą "width" i "height" także "text-align: center" dziala kiedy niema "width" i "height", kiedy się pojawiają "text-align: center" przestaje działać. Gdzie popełniłem błąd?

<!doctype html>
<html>
    <head>
        <meta charset="utf-8">
        <title>obraz</title>
        <link rel='stylesheet' href='style.css'>
    </head>

    <body>        
          <div id="obrazek">
        <img src="img.jpg">
          </div>
    </body>
</html>

#obrazek{
text-align: center;
width: 150px;
height: 150px;
}

komentarz 15 grudnia 2021 przez SzkolnyAdmin Szeryf (86,360 p.)

Co chcesz osiągnąć? Obrazem ma być tłem diva? Obrazek ma zmieniać rozmiary wraz ze zmianami rozmiarów ekranu? Obrazem ma być w określonym miejscu diva? Czy coś innego?

komentarz 15 grudnia 2021 przez shtemp Nowicjusz (130 p.)

Chodziło mi o to że chce dać np. 5 obrazków w jeden div i za pomocą tego div-a zmieniać rozmiar wszstkich obrazków na raz, ale już dostałem odpowiedż niżej iwszystko działa jak chciałem!

komentarz 15 grudnia 2021 przez SzkolnyAdmin Szeryf (86,360 p.)

To OK, możesz dać również max-wodth: 100%, wtedy obrazki nie powiększą się poza swój naturalny rozmiar.

1 odpowiedź

odpowiedź 15 grudnia 2021 przez KlemensGak Bywalec (2,210 p.)

Żeby obrazek dopasował się do DIV-a, dodaj rozmiar dla tagu <img> (obrazka).

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

Obrazek wtedy zajmie 100% szerokości powierzchni diva, a wysokość automatycznie się dostosuje się nadając naturalny kształt obrazka w tagu DIV. Daj znać czy działa.