Responsywność

Question

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.

Answer 1

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;

 

Comments

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).

---

+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ść.

---

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?

Answer 2

img { width: 100%; }

Answer 3

Masz może już jakiś kod, jeżeli tak to podaj i będziemy dalej rozmawiać.

Answer 4

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;

Comments

jak autor się pyta jak zrobić responsive website to na 100% nie będzie wiedział co to jest bootstrap.