Pomoc - Szukaj - Użytkownicy - Kalendarz
Pełna wersja: [CSS]rozmiar obrazu w divie o okreslonym rozmiarze
Forum PHP.pl > Forum > Przedszkole
achill
Krotka piłka, chcę się upewnic, że nie ma innego wyjścia

Mam taki kodzik w index.php (to wszystko z wewnatrz body)
CODE
<div id="logindex">
Welcome
</div>
<a href="home.php">Start</a>


CSS
CODE
#logindex {
background: url(parch.png);
margin-left: auto;
margin-right: auto;
width: 500px;
height: 500px;
}


probuje ustalic szerokość i wysokośc obrazu - jest wiekszy niz obszar DIVa a chce zeby sie w nim miescil - bez koniecznosci zmiany rozmiaru pliku lub wstawiania <img> w tresci strony

jak dla mnie opcje sa trzy:

1) da sie jakos przypisac szerokosc i wysokosc obrazka do wartosci background. wewnatrz tego diva - tyle ze powstaje konflikt bo div ma juz wartosci width i height

czy jest zatem jakas mozliwosc dodania tego w podobny sposob? obstawiam ze nie sad.gif

2)mozna przypisac wartosci background - zmieszczenie pliku w rozmiarze diva z automatu - bez opisywania wartosci height i width

3) albo wstawic <img...> w htmlu - czego chcialbym uniknac jesli to mozliwe
r4xz
jeśli dobrze cię zrozumiałem to wystarczy dla logindex dać width i height równe szerokości i wysokości obrazka.
achill
no niby tak ale jak napisałem w pkt 1

nie działa w ten sposob bo w tym divie jest juz width i height wiec zdublowanie tych wartosci powoduje ze nic sie nie wyswietli
nalezalo by to jakos przypisac do background tyle tylko ze juz sam nie wiem jak: probowalem juz rzeczy pod tytulem background height:, bcgrnd width: (ale css nie przewiduje nawet takich opcji - a przynajmniej mi to nic nie dalo)

zastanawiam sie czy jest jakis sposob zeby w obrebie jednego stylu mozna bylo opisac szerokosc i wysokosc i diva i obrazka stanowiacego jego tlo.
f1xer
nie możesz manipulować rozmiarem tła z poziomu CSS
thek
Rozmiarem tła jako takim nie można manipulować. Jedynie powtarzanie w pionie lub poziomie i ewentualna pozycja w kontenerze zawierającym. Szkoda, że nie można połączyć ewentualnego wywołania background-image i crop, bo to by rozwiązało sprawę. No ale niestety takie połączenie nie działa. Wielka szkoda, bo w opisywanym przypadku byś nie miał problemu.
achill
... i wszystko jasne. dzięki wielkie
emillo91
Witam. Napisałem skrypt który automatycznie ustala szerokość i wysokość uploadowanego avatara w polu profil użytkownika. Jego działanie polega na tym że pobiera on wymiary uploadowanego obrazka z katalogu useravatars i oblicza stosunek wysokości do szerokości (albo na odwrót) ,który będzie pasował do maksymalnej wysokości bądź szerokości ustalonej przeze mnie czyli 100px i wynik z obliczeń zapisuje w bazie mysql. Odświeżyłem ten temat bo nie chciałem zakałać drugiego a tutaj będzie on pasować i byćmoże pomoże innym w dostosowaniu tła zależnie od rozmiarów zdjęcia.

  1. $wymiary = explode("x", $avatarwym); //Rozróżnienie szerokości i wysokości także pobranej z bazy mysql
  2. //Ustalanie warunku który uruchomi odpowiednie równanie
  3. if($sss[0]>$sss[1]){ // Jeśli wysokość jest większa niż szerokość
  4. $proporcja = ($sss[1]/$sss[0]);
  5. $zaokragl = round($proporcja, 3); //Zaokrąglenie wyników do trzech miejsc po przecinku
  6.  
  7. $rownanie = ($zaokragl*100);
  8.  
  9. $szerokosc = '100';
  10. $wysokosc = $rownanie; //Wynik równania
  11.  
  12. }
  13. if($sss[0]<$sss[1]){ // Jeśli wysokość jest mniejsza niż szerokość
  14. $proporcja = ($sss[0]/$sss[1]);
  15. $zaokragl = round($proporcja, 3);
  16. $rownanie = ($zaokragl*100);
  17.  
  18. $szerokosc = $rownanie;
  19. $wysokosc = '100';
  20.  
  21. }
  22. if($sss[0]<100 && $sss[1]<100){ // Jeśli wysokość jest mniejsza od 100px i szerokość jest mniejsza od 100px
  23.  
  24. $szerokosc = $sss[0];
  25. $wysokosc = $sss[1];
  26. }
  27. else if($sss[0]%$sss[1] ==0){ // Jeśli wysokość i szerokość są takie same
  28.  
  29.  
  30. $szerokosc = $wymiary[0];
  31. $wysokosc = $wymiary[1];
  32. }
  33.  
  34. if(empty($avatarwym)){ //warunek który zostaje spełniony kiedy w bazie mysql nie ma ustalonych wymiarów avatara
  35.  
  36. mysql_query("UPDATE u_$loginzbazy SET wymiary ='".$szerokosc."x".$wysokosc."' WHERE nick = '$loginzbazy'") or die('błąd3');
  37. }
  38.  
  39. $wymiary = explode("x", $avatarwym);
  40.  
  41. if( $wymiary[0]>=60 && $wymiary[1]>=60){ //pomniejszenie rozmiarów avatara w profilu użytkownika przy spełnieniu warunku
  42. $szerokosc = ($wymiary[0]-20);
  43. $wysokosc = ($wymiary[1]-20);
  44. }
  45. $pozycjazdjecia = ($wysokosc/2); // Tutaj zostaje ustalona szerokość diva i jego pozycja w pionie
  46. $szerokoscdiv = (713-$szerokosc);
  47.  
  48.  
  49. '<div style="float:left;width:'.$szerokosc.'px;height:'.$wymiary[1].'px;margin-top:-'.$pozycjazdjecia.'px;margin-left:3px;margin-right:3px;">';
  50. if(!empty($useravatar)){
  51. echo '<img src="useravatars/'.$useravatar.'" width="'.$szerokosc.'" height="'.$wysokosc.'" />';
  52. }
  53. else{
  54. echo '<img src="forummotyw/images/noavatar.png" width="50" height="50" />';
  55. }
  56. '</div></div></div>';


Chodzi mi o to czy mógłbym jeszcze usprawnić ten skrypt i czy warunki są dobrze wykonane czyli czy się nie powtarzają itp.
Od razu piszę że skrypt automatycznie ustala rozmiar zdjęcia który nigdy nie będzie większy niż 100px X 100px i wynik zapisuje w bazie mysql. Dla testów udostępniam demo tylko że tutaj można wisywać rozmiar obrazka z tym że "x" oddzielający szerokość od wysokości musi być mały i nie może być spacji.
demo

Dla przykładu:
350x100
150x100
30000x150000

Skrypt nie zadziała jeśli szerokość będzie wynosić np 1000px a wysokość 1px ( za mało instrukcji biggrin.gif);

EDIT:
Propo edycji postu nie wiem czy o takie coś chodziło wink.gif
b4rt3kk
Jeśli możesz to edytuj post i zastąp znacznik CODE znacznikiem PHP, bo tak to ciężko czytać.
To jest wersja lo-fi głównej zawartości. Aby zobaczyć pełną wersję z większą zawartością, obrazkami i formatowaniem proszę kliknij tutaj.
Invision Power Board © 2001-2025 Invision Power Services, Inc.