[CSS] wyśrodkowanie, zablokowanie zmiany wielkości zdjęcia niezależnie od zmiany szerokości okna Opcje

[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?

Ten post edytował 1q2w3e4r 16.07.2014, 09:58:51

[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ć?

Ten post edytował 1q2w3e4r 16.07.2014, 10:09:17

[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.

Ten post edytował 1q2w3e4r 16.07.2014, 10:22:12

[Damonsson]

[CSS] pobierz, plaintext 
    width: 1680px !important;
[CSS] pobierz, plaintext 

?

[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/

Ten post edytował 1q2w3e4r 16.07.2014, 10:59:50

[Turson]

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



@edit2
Rozumiem, że nie jest to do wykonania?

Ten post edytował 1q2w3e4r 23.07.2014, 13:29:26

[trueblue]

http://jsfiddle.net/S23Ss/