Responsywny obraz przy position: absolute i o określonych wymiarach

pytanie zadane 19 lipca 2016 w Nasze projekty przez fifi3000 Nowicjusz (230 p.)
edycja 19 lipca 2016 przez fifi3000

Cześć!

Mam taki layout:

i taki kod:

.page {
  position: absolute;
  top: 5%;
  left: 17%;
  bottom: 5%;
  right: 17%;
  z-index: -1;
}
.photo {
  width: 400px;
  height: 400px;
  left: 83%;
  margin-left: -200px;
  position: absolute;
  top: 50%;
  margin-top: -175px;
}

Chciałbym zachować taki rozkład do określonej szerokości. Czy zna ktoś sprytny sposób, aby obraz był responsywny?

[EDIT]

nie mam na myśli CSS @media, bardziej chodzi o zachowanie takiego layoutu bez zmiany układu, ale aby obraz odpowiednio się zmniejszał. Coś w stylu img-responsive z bootstrapa.

1 odpowiedź

odpowiedź 19 lipca 2016 przez damek1010 Obywatel (1,880 p.)

Jeżeli chodzi o to, że strona ma zachować taki wygląd do jakiejś szerokości to na pomoc przychodzi zapytanie @media w CSS. Na przykład: @media screen and (max-width: <Tutaj twoja szerokość>){ <Tutaj styl jaki ma mieć strona, jeżeli szerokość strony jest mniejsza od podanej w zapytaniu szerokości> }. Więcej możesz przeczytać tu: https://developers.google.com/web/fundamentals/design-and-ui/responsive/fundamentals/use-media-queries?hl=pl
i tu: http://www.w3schools.com/cssref/css3_pr_mediaquery.asp (z uwzględnieniem tego, że tu może być coś nie up-to-date).

komentarz 19 lipca 2016 przez xmentor Nałogowiec (49,520 p.)

http://forum.pasja-informatyki.pl/34559/w3schools-nie-szerzmy-falszywej-propagandy

komentarz 19 lipca 2016 przez fifi3000 Nowicjusz (230 p.)

Hej,

dzięki za komentarz! Teraz widzę, że niedoprecyzowałem pytania (zedytuję je za moment). Miałem na myśli, czy jest jakiś sposób na to, aby obraz był responsywny bez podmieniania go 'ręcznie' przez CSS. Czyli np do szerokości 768px layout jest responsywny, nie zmieniam układu, obraz automatycznie zmniejsza się.

Szukam czegoś w stylu img-responsive (bootstrap) lub też jakichś innych nieznanych mi trików