Pomoc - Szukaj - Użytkownicy - Kalendarz
Pełna wersja: [CSS] wyśrodkowanie, zablokowanie zmiany wielkości zdjęcia niezależnie od zmiany szerokości okna
Forum PHP.pl > Forum > Po stronie przeglądarki
1q2w3e4r
Witam

Mam plugin, który wstawia zdjęcia do strony w <img />
Gdyby to było tło to bym w css zrobił tak: background: url(images/zdjecie.jpg) center; i by było ok. Zdjęcie było by zawsze wyśrodkowane niezależnie od przeglądarki i nie zmieniało by rozmiaru do szerokości okna. Tylko tutaj jest to wstawione jaki img i czy jest możliwość zrobienia podobnego efektu za pomocą CSS bez modyfikacji tego pluginu?

Próbowałem tak:
Kod
.custom img {
    background-position:center;
    text-align: center;
    width: 1680px;
    margin: 0 auto;
}

ale nie działa. Jakieś pomysły?
Turson
dodaj display:block
nospor
Proszę poprawic tytul. Tag to nie tytul
1q2w3e4r
@nospor - sorry, miałem wpisać ale przeszedłem do treści i zapomniałem
@Turson - niestety nic to nie działo bo jak się okazuje szerokość zmienia plugin. Wykrywa zmianę szerokości okna i zmienia rozmiar w style zdjęcia:
Kod
<img src="http://ssss.pl/zdjecie.jpg" height="278" width="1680" alt="" class="slider-244 slide-306" style="display: inline; width: 963px;">

Generalnie to jest slider więc za każdym przebiegiem to sprawdza i dopasowuje. Czy da się go jakoś nadpisać na stałe (za pomocą css lub js) czy trzeba już to w pluginie edytować?
Damonsson
wklej przykład na jsfiddle, bo ja nie bardzo wiem o co Chodzi. margin: 0 auto, powinno Ci środkować, skoro nie środkuje, to coś masz nie tak po drodze.
1q2w3e4r
Środkuje ale zmienia się rozmiar zdjęcia przy zmianie szerokości monitora co powoduje, że zmienia się wysokość zdjęcia. Potrzebuję mieć stalą szerokość tego zdjęcia 1680px niezależnie czy monitor jest 600px, 1024 czy 1680. Rozmiar ma się nie zmieniać. Jak się okazało, szerokość zdjęć zmienia skrypt slidera (bo chce być responsive) sprawdzając za kazdym razem szerokość okna nadpisując wartosci width w img.
Niestety nie wkleję tego na ta strone bo to jest plugin slidera dla wordpressa. Mógłbym go zmienić w kodzie pluginu ale przy aktualizacji nadpisze te zmiany.
Dlatego potrzebuję to zrobić najlepiej zewnętrznie, jeśli nie ma takiej możliwości to trudno, zrobię to w pluginie blokujac mozliwość aktualizacji.
Damonsson
  1. width: 1680px !important;

?
1q2w3e4r
Ten kod pomógł rozwiązać problem ze zmianą szerokości i wysokości zdjęcia. Jednak teraz pojawił się kolejny problem, że zdjęcie jest do lewej strony i na dole pokazuje się ssuwak. Zrobiłem tutaj demo:
http://jsfiddle.net/VY2G5/1/

a chcę aby to wyglądało tak jak tutaj:
http://jsfiddle.net/9ZgdT/2/
Turson
Cytat(Turson @ 16.07.2014, 10:36:45 ) *
dodaj display:block

1q2w3e4r
Jest, dodałem teraz na końcu: http://jsfiddle.net/VY2G5/3/
Turson
http://jsfiddle.net/VY2G5/4/
Umieszczaj w divie skoro tak określiłeś css
1q2w3e4r
Dzięki. Faktycznie, zapomniałem w przykładzie dodać diva.
Pojawia się jeszcze jeden problem ale na jsfiddle.net nie da się tego pokazać. Chcę żeby zdjęcie zawsze miało oryginalne rozmiary. Następnie zależy mi również na tym aby ta czerwona kreska zawsze była na środku niezależnie od rozdzielczości przeglądarki.
Chcę aby to:
Kod
http://xdd.pl/test/16/2.html


Działało tak samo jak to:
Kod
http://xdd.pl/test/16/1.html

Czyli zmieniając szerokość okna przeglądarki samo zdjęcie cały czas zachowuje oryginalne rozmiary i zawsze jest na środku (linia kontrolna czerwona).


Podsumowując potrzeba coś co zatrzyma dopasowywanie do podanego przez plugin rozmiaru. Próbowałem background-repeat: no-repeat ale nie działa. Czy ma ktoś jakiś pomysł?




@edit
Widzę, że nikt nie ma pomysłu jak to rozwiązać. Szkoda sad.gif



@edit2
Rozumiem, że nie jest to do wykonania?
trueblue
http://jsfiddle.net/S23Ss/
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.