Centrare foto panorama in div

#1
colombo2003

Posted 09 February 2016 - 15:27

Senior Member

Grup: Senior Members
Posts: 6,312
Înscris: 16.07.2008

Se da o poza panoramica, pe care, la afisare, as vrea sa o centrez intr-un div.
Si sa nu decat bucata de poza care este in acel div (ca si cum m-as uita printr-o fanta la poza). Marginile care depasesc lateral div-ul vreau sa nu le vad.

M-am gandit si am incercat sa folosesc un div (sa zicem div1) in div (sa zicem div2), si imaginea in div2. Cu overflow: hidden si cu margine -100%
Dar nu a iesit mare lucru.

Cum as putea realiza asta corect?
Multumesc

PS. Ulterior acestei poze panoramice vazuta prin acest div, ii voi atasa, ca proprietati, la hover, transform3d si transition. Asa incat cred ca solutia ca sa fi pus poza ca background unuia dintre div-uri nu este buna (ca imaginea va fi statica?)

LE. Sorry, acum vad ca am uitat sa postez si codul

<head>
<style type="text/css">
	.container {
		width:600px;
		overflow: hidden;
		position: relative;
	 }
	 .containerSecond{
		position: absolute;
		top:0px;
		left:-100%;
		width:300%;
	 }
	 .image{
		width: 800px;
	 }		  
</style>
</head>

<body>
<div class="container">
   <div class="containerSecond">
	   <img src="../images/Panint1.jpg" class="image" />
   </div>
</div>
</body>
</html>

Edited by colombo2003, 09 February 2016 - 15:45.

Back to top

#2
cristirg

Posted 09 February 2016 - 16:23

Senior Member

Grup: Senior Members
Posts: 7,711
Înscris: 16.11.2012

vrei ceva de genu : https://jsfiddle.net...stirg/sL8qhas0/

sau asa: http://jsfiddle.net/...irg/sL8qhas0/2/

Edited by cristirg, 09 February 2016 - 16:29.

Back to top

#3
colombo2003

Posted 09 February 2016 - 16:51

Senior Member

Grup: Senior Members
Posts: 6,312
Înscris: 16.07.2008

Multumesc pentru raspuns, insa, nu e nici una, nici alta...

Sa ne imaginam, in prim-plan o coala foarte mare de hartie, iar in spatele ei poza panoramica.
Fac o decupatura in coala, prin care vad doar o bucatica din poza.

Ce este din poza, in stanga si dreapta decupaturii, sa nu se vada.
Iar mijlocul decupaturii (pe orizontala) sa coincida cu mijlocul pozei.
Asa ceva vreau.

Back to top

#4
DILAS

Posted 10 February 2016 - 10:23

Member

Grup: Members
Posts: 320
Înscris: 03.12.2007

De plictiseala: https://jsfiddle.net/dowa11q6/
Cred ca asta vrei. Vezi ca marginul ala negativ se calculeaza dupa o formula nu tre sa fie mereu 100px, conteaza cat de mare e imaginea si containerul. Daca nu le stii dinainte tre sa bagi si ceva jQuery.

Back to top

#5
colombo2003

Posted 10 February 2016 - 15:14

Senior Member

Grup: Senior Members
Posts: 6,312
Înscris: 16.07.2008

Da, da. Cam aia e ce vreau... Posted Image

Multumesc pentru raspuns.

Acum ma mai joc nitel cu valorile de pe acolo.
As vrea insa ca ceea ce vad, sa fie exact mijlocul pozei (mijlocul pozei sa coincida cu mijlocul ferestrei de vizualizare care sa fie si mijlocul ecranului).

In alta ordine de idei, cand zici "dinamic", te referi la % (sa se autoscaleze)?
Cat de complicat ar fi cu javascript? Ce-ar trebuie sa faca mai exact acel script?

A propos, eu as vrea ca mai apoi sa adaug pozei efect de miscare (derulare). Asta stiu sa fac (transition+transform), dar as vrea ca daca am cursorul in jumatatea dreapta a ceea ce vad din poza, la hover, sa defileze spre stanga; iar daca am cursorul in jumatatea stanga, sa defileze spre dreapta.

Deci, in functie de pozitia cursorului fata de mijocul pozei, sa se duca intr=o parte sau in alta. Numai ca nu stiu cum as putea prealua coordonatele mouseului.
Ma gandeam sa fac ceva de genul clip-rect, pentru a decupa poza in 2 parti, cu id-ul lor si apoi hover la fiecare, dar nu cred ca merge asa.

Ceva idei si pentru asta?
Multam.

Edited by colombo2003, 10 February 2016 - 15:15.

Back to top

#6
DILAS

Posted 10 February 2016 - 15:32

Member

Grup: Members
Posts: 320
Înscris: 03.12.2007

cam ce browsere vrei sa suporti? ti le fac diseara daca nu mi-e lene.

Back to top

#7
colombo2003

Posted 10 February 2016 - 16:10

Senior Member

Grup: Senior Members
Posts: 6,312
Înscris: 16.07.2008

Pe PC: IE, Firefox, Chrome si Opera.
Pe telefon si tableta am Android.

Nu pot testa pe Linux si Mac.

Multumesc anticipat.
Posted Image

Back to top

#8
DILAS

Posted 10 February 2016 - 16:31

Member

Grup: Members
Posts: 320
Înscris: 03.12.2007

Ce versiune de IE?

Back to top

#9
colombo2003

Posted 10 February 2016 - 17:00

Senior Member

Grup: Senior Members
Posts: 6,312
Înscris: 16.07.2008

Toate-s ultimele versiuni.
Deci IE11.0.

Back to top

#10
DILAS

Posted 10 February 2016 - 23:13

Member

Grup: Members
Posts: 320
Înscris: 03.12.2007

http://jsfiddle.net/cs0L87u4/1/
Ai aici un attempt. Nu functioneaza cum trebuie pt ca probabil am o eroare de logica. Mi-e cam lene sa o rezolv si nu prea mai e fun. De aici poti sa incerci sa-l faci sa mearga sau poti sa pui o intrebare pe SO. Sigur o sa se gasesca acolo cineva sa-ti dea codul.
Ca sugestie, daca vrei sa faci chestii mai bine apuca-te sa inveti ceva jquery.

Ok, hai ca l-am rezolvat. Am scos inca calculul dinamic de pe img margin pt ca ar fi complicat prea mult algoritmul (si mi-e lene sa scriu cod sa acopere toate positibilatile). Tre sa-ti implementezi acum clasele de CSS care sa-ti faca transition (si pt asta mi-e lene).

Edited by DILAS, 10 February 2016 - 23:31.

Back to top

Anunturi

Bun venit pe Forumul Softpedia!

Centrare foto panorama in div

#1 colombo2003 Posted 09 February 2016 - 15:27

#2 cristirg Posted 09 February 2016 - 16:23

#3 colombo2003 Posted 09 February 2016 - 16:51

#4 DILAS Posted 10 February 2016 - 10:23

#5 colombo2003 Posted 10 February 2016 - 15:14

#6 DILAS Posted 10 February 2016 - 15:32

#7 colombo2003 Posted 10 February 2016 - 16:10

#8 DILAS Posted 10 February 2016 - 16:31

#9 colombo2003 Posted 10 February 2016 - 17:00

#10 DILAS Posted 10 February 2016 - 23:13

Anunturi

▶ 0 user(s) are reading this topic

Sign In

#1
colombo2003

Posted 09 February 2016 - 15:27

#2
cristirg

Posted 09 February 2016 - 16:23

#3
colombo2003

Posted 09 February 2016 - 16:51

#4
DILAS

Posted 10 February 2016 - 10:23

#5
colombo2003

Posted 10 February 2016 - 15:14

#6
DILAS

Posted 10 February 2016 - 15:32

#7
colombo2003

Posted 10 February 2016 - 16:10

#8
DILAS

Posted 10 February 2016 - 16:31

#9
colombo2003

Posted 10 February 2016 - 17:00

#10
DILAS

Posted 10 February 2016 - 23:13