[Evurak]

#programista15k #stronaodfrontu #www

Cześć.
Potrzebuje zrobić pojedynczą stronę na której będzie tylko jeden obrazek. Chcę natomiast by był on responsywny i dopasowywał się do urządzenia na którym jest wyświetlany.
Jak to zrobić? Obrazek musi być w jakimś określonym formacie?
Dziękuję po podpowiedzi.

[Dwudziestydrugi]

@Evurak: podaję hasło: grafika wektorowa

[BreathDeath]

@Evurak: Zależy jaki to obrazek, jak zdjęcie to bym sobie wrzucił kilka rozmiarów i wybierał do wyświetlenia odpowiedni w zależności od tego jaka jest rozdzielczość ekranu.

[Saeglopur]

@Evurak: Ja jako strony zaślepki stosuje 1 plik gdzie w stylach mam ustalone tło - tą graficzne sobie podmieniam. Ale przestrzegam że to rozwiązanie sprzed 10 lat które po prostu z przyzwyczajenia stosuje xd

[TomSz]

@Saeglopur: najpewniej chodzi Ci o style: max-width: 100%; height: auto jeśli to jest jeden obrazek, jeśli chodzi Ci o to, żeby w zależności od wielkości wyświetlacza wyświetlał się obrazek w różnej jakości to musisz się srcset i sizes zainteresować

@Dwudziestydrugi: grafika wektorowa ma się nijak do responsywności

[Evurak]

@TomSz:

<style>
img {
  max-width: 100%;

[Evurak]

@BreathDeath: możesz podać przykład składni?

[TomSz]

@Evurak: tak, możesz też bezpośrednio

<img src="costam.jpeg.jpg" alt="obrazek" style="max-width: 100%; height: auto;">

max-width: 100% znaczy że obrazek nigdy nie będzie szerszy niż ekran, ale może być węższy jeśli ekran jest po prostu od niego szerszy
height: auto znaczy, że wysokość obrazka będzie zawsze proporcjonalna do

[BreathDeath]

@Evurak: Nie potrafię z pamięci, nie jestem frontendowcem. Poszukaj sobie. Ja do takich celów używam jakiś bibliotek w stylu bootstrapa.