Rozciąganie tła CSS

0

Witam,
jak rozciągnąć "ściany" kwadratowego tła, aby przybrało wymiary diva, w którym jest, ale nie background-size: 100% 100%;, bo to pogrubia, a ja chcę tylko rozciągnąć

1

Podałeś trochę za mało konkretów - chociażby odnośnie tego, czy jeśli będą inne proporcje obrazka oraz div'a, to czy ma obrazek zostać docięty, czy np. przeskalowany (z zagubieniem proporcji).

Na początek rzuć okiem na fajny plugin, z którego sam często korzystam - https://vegas.jaysalvat.com/

0
cerrato napisał(a):

Podałeś trochę za mało konkretów - chociażby odnośnie tego, czy jeśli będą inne proporcje obrazka oraz div'a, to czy ma obrazek zostać docięty, czy np. przeskalowany (z zagubieniem proporcji).

Na początek rzuć okiem na fajny plugin, z którego sam często korzystam - https://vegas.jaysalvat.com/

Proporcje obrazka i diva są inne i obrazek ma mieć wydłużone ściany, bo obrazek to taka "ramka"

1

No to rzuć okiem na https://jsfiddle.net/f9qwxz3k/.

Zmieniając sobie w CSS rozmiary DIV'a możesz kontrolować rozmiar obrazka. Obrazek dopasowuje się do rozmiaru div'a, w którym jest osadzony. Oryginalny obrazek (przed skalowaniem) wygląda tak:
title

Czy chodziło Ci o coś takiego?

1

A odnośnie fragmentu "ale nie background-size: 100% 100%;" - jeśli chodzi Ci o to, że przy rozciągnięciu na szerokość pogrubiają się także pionowe fragmenty ramki, to chyba jedyna opcja to podzielenie ramki na 3 części: bok lewy, środek (zawierający poziome linie) oraz bok prawy. I boczki osadzasz bez skalowania, a rozciągasz jedynie środek, w którym nie masz pionowych elementów, więc nic Ci się nie pogrubi.

0
cerrato napisał(a):

A odnośnie fragmentu "ale nie background-size: 100% 100%;" - jeśli chodzi Ci o to, że przy rozciągnięciu na szerokość pogrubiają się także pionowe fragmenty ramki, to chyba jedyna opcja to podzielenie ramki na 3 części: bok lewy, środek (zawierający poziome linie) oraz bok prawy. I boczki osadzasz bez skalowania, a rozciągasz jedynie środek, w którym nie masz pionowych elementów, więc nic Ci się nie pogrubi.

Ok, dzięki za pomoc.

1

Ewentualnie jeszcze jedna rzecz mi przychodzi do głowy: wprawdzie nie wiem, jak ta ramka wygląda (bo nie wkleiłeś jej na forum), ale jeśli jest to jakiś w miarę prosty kształt, bez zawijasów i ozdobników, możesz zamiast wstawiać rysunek i go rozciągać, rysować sobie obramowanie w JS na Canvas.

0
cerrato napisał(a):

Ewentualnie jeszcze jedna rzecz mi przychodzi do głowy: wprawdzie nie wiem, jak ta ramka wygląda (bo nie wkleiłeś jej na forum), ale jeśli jest to jakiś w miarę prosty kształt, bez zawijasów i ozdobników, możesz zamiast wstawiać rysunek i go rozciągać, rysować sobie obramowanie w JS na Canvas.

Są to proste kształty.

0
cerrato napisał(a):

A odnośnie fragmentu "ale nie background-size: 100% 100%;" - jeśli chodzi Ci o to, że przy rozciągnięciu na szerokość pogrubiają się także pionowe fragmenty ramki, to chyba jedyna opcja to podzielenie ramki na 3 części: bok lewy, środek (zawierający poziome linie) oraz bok prawy. I boczki osadzasz bez skalowania, a rozciągasz jedynie środek, w którym nie masz pionowych elementów, więc nic Ci się nie pogrubi.

A jest poradnik pokazujący jak to zrobić?

0
cerrato napisał(a):

Tutaj masz podstawy odnośnie tego, jak w ogóle podejść do tematu - https://kursjs.pl/kurs/canvas/canvas.php ORAZ http://phpmajster.blogspot.com/2015/06/html5-podstawy-pracy-z-canvas.html

A tutaj z kolei jak się rysuje różne kształty - http://www.kurshtmlcss.pl/kurs-html/lekcja18-canvas.php ORAZ https://css-tricks.com/working-with-shapes-in-web-design/

Zapoznałem się z tym i wiem co mam robić, ale jak dodać do canvasa moje zdjęcie?

1

Wcześniej pisałeś, że to zdjęcie to taka prosta ramka, więc wpadłem na pomysł, żeby zamiast wstawiania i rozciągania zdjęcia (albo jeszcze cięcia go na 3 kawałki) możesz sobie taką ramkę narysować. Nie masz wstawiać obrazka, ale narysować sobie ramkę, a podczas rysowania uwzględnić aktualny rozmiar diva w którym chcesz rysować, przez co będziesz miał zawsze idealnie dopasowaną ramkę do rozmiaru pojemnika.

0
cerrato napisał(a):

Wcześniej pisałeś, że to zdjęcie to taka prosta ramka, więc wpadłem na pomysł, żeby zamiast wstawiania i rozciągania zdjęcia (albo jeszcze cięcia go na 3 kawałki) możesz sobie taką ramkę narysować. Nie masz wstawiać obrazka, ale narysować sobie ramkę, a podczas rysowania uwzględnić aktualny rozmiar diva w którym chcesz rysować, przez co będziesz miał zawsze idealnie dopasowaną ramkę do rozmiaru pojemnika.

A da się od krawędzi diva zacząć rysowanie?

2
cerrato napisał(a):

Wcześniej pisałeś, że to zdjęcie to taka prosta ramka, więc wpadłem na pomysł, żeby zamiast wstawiania i rozciągania zdjęcia (albo jeszcze cięcia go na 3 kawałki) możesz sobie taką ramkę narysować. Nie masz wstawiać obrazka, ale narysować sobie ramkę, a podczas rysowania uwzględnić aktualny rozmiar diva w którym chcesz rysować, przez co będziesz miał zawsze idealnie dopasowaną ramkę do rozmiaru pojemnika.

Zrobiłem to za pomocą border-image, i działa.

1

Tutaj kod:

border: 0.8vw solid pink;
border-image: url("img/ramka.png") 9 round;

Może się przyda :)

1 użytkowników online, w tym zalogowanych: 0, gości: 1