• Najnowsze pytania
  • Bez odpowiedzi
  • Zadaj pytanie
  • Kategorie
  • Tagi
  • Zdobyte punkty
  • Ekipa ninja
  • IRC
  • FAQ
  • Regulamin
  • Książki warte uwagi

Responsywność

VPS Starter Arubacloud
0 głosów
354 wizyt
pytanie zadane 28 listopada 2015 w HTML i CSS przez MatiiTv Gaduła (3,790 p.)
Witam, jak osiągnąć jakimkolwiek językiem frontendowym to, żeby strona pobierała szerokość ekranu użytkownika i na tej podstawie ustawiała wartość "width" w tagu HTML "img"?

Pozdrawiam.

4 odpowiedzi

0 głosów
odpowiedź 28 listopada 2015 przez Ivan Maniak (60,650 p.)

Możesz zrobić to w CSS nadając zdjęciu width: 100% [Nie jestem pewien ale musi ono chyba mieć display: block]

Możesz zrobić to także javascript

var w = window.innerWidth;
var img = document.getElementById('image');

img.style.width = w;

 

komentarz 28 listopada 2015 przez Mlody89 Mądrala (6,920 p.)

Minus że przy użyciu JS przypisze zdjęciu wymiar w pikselach jaki odczyta przy wykonaniu kodu. Znacznie lepszym sposobem jest zastosowanie pierwszej opcji dzięki czemu zdjęcie będzie się skalować (ps. element img nie musi mieć display: block).

komentarz 28 listopada 2015 przez Ivan Maniak (60,650 p.)
+1 jeżeli przeglądarka nie obsługuje js nie będzie to działało, ale podałem mu to jako alternatywna wersja. Co do wymiaru to zawsze można przy zmianie rozdzielczości okna ponownie odczytywać jego szerokość.
komentarz 28 listopada 2015 przez MatiiTv Gaduła (3,790 p.)
A da sie w CSS zrobic zeby zdjęcie nie skalowalo sie tylko obcinalo? O to mi chodziło.

A i da sie to jakoś zrobic z właściwością CSS background-image?
0 głosów
odpowiedź 9 grudnia 2015 przez Hyperscade Użytkownik (640 p.)
img { width: 100%; }
0 głosów
odpowiedź 9 grudnia 2015 przez Jan Wroblewski Początkujący (460 p.)
Masz może już jakiś kod, jeżeli tak to podaj i będziemy dalej rozmawiać.
–1 głos
odpowiedź 29 listopada 2015 przez niezalogowany

Możesz też skorzystać z bootstrapa i wtedy dać takie 2 klasy: 

<img class="center-block img-responsive" src="images/obraz.png" /> //skalowanie obrazka

Jeżeli chcesz przyciąć to ustaw w CSS 

background-position: 50% 0;
komentarz 9 grudnia 2015 przez Jan Wroblewski Początkujący (460 p.)
jak autor się pyta jak zrobić responsive website to na 100% nie będzie wiedział co to jest bootstrap.

Podobne pytania

0 głosów
1 odpowiedź 294 wizyt
pytanie zadane 9 grudnia 2015 w HTML i CSS przez keyram Obywatel (1,540 p.)
0 głosów
4 odpowiedzi 628 wizyt

92,453 zapytań

141,262 odpowiedzi

319,088 komentarzy

61,854 pasjonatów

Motyw:

Akcja Pajacyk

Pajacyk od wielu lat dożywia dzieci. Pomóż klikając w zielony brzuszek na stronie. Dziękujemy! ♡

Oto polecana książka warta uwagi.
Pełną listę książek znajdziesz tutaj.

Akademia Sekuraka

Akademia Sekuraka 2024 zapewnia dostęp do minimum 15 szkoleń online z bezpieczeństwa IT oraz dostęp także do materiałów z edycji Sekurak Academy z roku 2023!

Przy zakupie możecie skorzystać z kodu: pasja-akademia - użyjcie go w koszyku, a uzyskacie rabat -30% na bilety w wersji "Standard"! Więcej informacji na temat akademii 2024 znajdziecie tutaj. Dziękujemy ekipie Sekuraka za taką fajną zniżkę dla wszystkich Pasjonatów!

Akademia Sekuraka

Niedawno wystartował dodruk tej świetnej, rozchwytywanej książki (około 940 stron). Mamy dla Was kod: pasja (wpiszcie go w koszyku), dzięki któremu otrzymujemy 10% zniżki - dziękujemy zaprzyjaźnionej ekipie Sekuraka za taki bonus dla Pasjonatów! Książka to pierwszy tom z serii o ITsec, który łagodnie wprowadzi w świat bezpieczeństwa IT każdą osobę - warto, polecamy!

...