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ąć
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/
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"
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:
Czy chodziło Ci o coś takiego?
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.
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.
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.
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.
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ć?
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/
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/
Ok, dzięki
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?
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.
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?
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.
Tutaj kod:
border: 0.8vw solid pink;
border-image: url("img/ramka.png") 9 round;
Może się przyda :)