div προσαρμοζει height αναλογα με το υψος οθονης

slevinkelevra · 11 Νοεμβρίου 2013

Καλησπερα

Στην αρχικη σελιδα του site που φτιαχνω, εχω το κλασικο : μια εικονα και ενα κουμπι απο κατω "Μαθετε Περισσοτερα" που οταν το κλικαρεις σε παει σε αλλη σελιδα.

Η εικονα ειναι μεσα σε div. Οι εικονες που περιεχονται στο div ειναι τυχαιες οποτε ειναι ειτε μακροστενες ειτε οχι.

Θα ηθελα αυτο το div να προσαρμοζει το υψος του αναλογα με το υψος της οθονης, ωστε να ειναι παντα ορατο στον χρηστη ολοκληρο, οχι να χρειαζετε ο χρηστης να κανει scroll down για να δει ολη την εικονα και να βρει το κουμπι "Μαθετε Περισσοτερα".

Οποτε (συμφωνα και με τους κανονες του responsive design) εχουμε για το div width:100% , αλλα το height πρεπει να ειναι καποιου ειδους "φορμουλα" οπως

height = (screen height - header height) /2

Πως το κανω αυτο?

(Το χειροτερο ειναι οτι το header height ειναι auto παλι λογο responsive design)

Ελπιζω η εικονα να βοηθαει

sougiasdj · 12 Νοεμβρίου 2013

Αν εχεις χρόνο δώσε ενα demo: Λογικά θα μπορείς με

.imgdiv img{ width:100%;height:auto;}

migf1 · 12 Νοεμβρίου 2013

Για υπολογισμούς που εμπλέκουν την οθόνη μπορείς να χρησιμοποιήσεις τις μεθόδους: $(window).width() & $(window).height() σε jQuery, ή τις ιδιότητες screen.width & screen.height σε Javascript.

Από εκεί και πέρα όμως δεν έχω πολυ-καταλάβει τι θέλεις να κάνεις. Π.χ. αν η εικόνα σου έχει ύψος ας πούμε 1000px και η οθόνη του επισκέπτη είναι 480px πως ακριβώς θέλεις να συμπεριφερθεί η σελίδα σου ώστε να μη κάνει scroll ο επισκέπτης; Μια εκδοχή είναι να της δώσεις css max-height μαζί με css width:auto και max-width:100%, μια άλλη εκδοχή είναι να κάνεις crop την εικόνα, κλπ.

Γενικώς όμως, που είναι το "κακό" στο να κάνει scroll ο επισκέπτης;

Κατά την άποψή μου, η καλύτερη εκδοχή είναι να εμφανίζεις ένα thumbnail της εικόνας σε κάποιο λογικό size, κι αν ο επισκέπτης έχει μικρή οθόνη ας κάνει scroll. Ή αν είσαι μερακλής, έχε διαφορετικές εικόνες για διαφορετικά μεγέθη οθονών κι εμφάνιζε την κατάλληλη κάθε φορά.

slevinkelevra · 13 Νοεμβρίου 2013

Η εικονα δεν ειναι το θεμα. Το div που την περιεχει ειναι. Η εικονα προσαρμοζετε αυτοματα στο div επειδη εχει width :100% , συμφωνα με τις (σωστες) οδηγιες του κυρίου Site: εδω Οτι εικονα και να ειναι, σωστα θα κατσει, χωρις strecth αλλιωση κτλ

Το θεμα μου ειναι το div : αν η οθονη ειναι 480 και το header 80, το div να γινει 200, ωστε να το βλεπει ολοκληρο κατευθειαν. Η εικονα μεσα, παλι θα κατσει σωστα οποτε ΟΚ. Μετα ο χρηστης ας κανει οτι θελει, scroll, zoom κτλ. Και ας κανει και το div scroll προς τα πανω. Αλλα στην αρχη ας ειναι 200 , να το δει ολο

Γιατι? Για να δειχνει πιο ομορφο, αρχικη σελιδα ειναι ρε συ. Η πρωτη σελιδα που θα δεις σε ενα σαιτ θα σ αρεσε να εχει μια "κομμενη" εικονα?

Συν του οτι αμα δεν δει εξ αρχης το κουμπι "Μαθετε περισσοτερα" δε θα χαμπαριασει οτι εχει κ αυτη τη δυνατοτητα....

Ελπιζω τουλαχιστον να δικαιολογησα την εμμονη μου

@migf1 νομιζω το screen.height μου ακουγετε σα καλη λυση

@sougiasdj τωρα εχω

width:100%;
height:50%;

για το div και δε βοηθαει. Και auto να βαλω το height παλι δε βοηθαει.

Ευχαριστω και παλι

migf1 · 13 Νοεμβρίου 2013

Όπως σου έγραψα και χτες, μια προσέγγιση είναι να δώσεις στην εικόνα σου css max-height μαζί με max-width:100%; και width:auto; Στην εικόνα, όχι στο div!

Κώδικας:

<!DOCTYPE html>
<html>

<head>
	<meta charset="UTF-8">
	<meta content="width=device-width, initial-scale=1.0" name="viewport">
	<title>slevinkelevra's question | Insomnia</title>

	<style type="text/css">
		.header {width:20%}
		.main {width:80%}
	</style>

</head>

<body>
	<div class="header">
		<h1>Header</h1>
	</div>

	<div class="main">
		<div>
			<img id='id-img' src="http://www.dscommunications.ca/wp-content/uploads/2012/11/responsive-design-example.jpg" width="1024" height="768" />
		</div>
		<a href="#">Read more...</a>
	</div>

	<script type="text/javascript">
		function img_adjust( img ) {
			if ( !img )
				return;

			// 50% of 80%
			var maxhImg = parseInt(window.innerHeight * 0.80 * 0.50);

			img.style.height = img.style.maxHeight = maxhImg + 'px';
			img.style.width = 'auto';
			img.style.maxWidth = '100%';
		}

		window.onload = window.onresize = function() {
			img_adjust( document.getElementById('id-img') );
		}
	</script>
</body>

</html>

Δοκίμασε τον παραπάνω κώδικα σε κάποιον browser και κάνε resize το παράθυρό του για να δεις πως προσαρμόζεται η εικόνα κάθε φορά.

slevinkelevra · 14 Νοεμβρίου 2013

@migf1 Ω ναι, εχεις δικιο....εν μερη...

Δηλαδη , ναι πρεπει να ασχοληθω με την εικονα κ οχι το div.

Αλλα ο κωδικας που εγραψες αλλιωνει την εικονα ως προς το width της. Και περιεχει και max width που δεν υποστηριζετε απο καποιες εκδοσεις και πριν του Explorer (αν θυμαμαι καλα, σ αυτο παιζει και να κανω λαθος).

Δηλαδη αν εχω πχ, τον Chrome ανοιχτο και αρχιζω κ τον αυξομειωνω μονο απο το πλαι του, η εικονα αλλιωνει το width.

Βεβαια, αυτο δε σημαινει οτι ο κωδικας σου ειναι για πεταμα. Ισα-ισα! Ειναι μια χαρα, και ευχαριστω που ασχοληθηκες. Αν δεν τον εφτιαχνες , δε νομιζω να μπορουσα κ γω να ξεκολλησω. Οποτε τα credits για original idea πανε σε σενα. Απλα πηρα τον κωδικα και (νομιζω) τον βελτιωσα.

Ουσιαστικα οι αλλαγες ειναι μεσα στην img_adjust

<!DOCTYPE html>
<html>

<head>
	<meta charset="UTF-8">
	<meta content="width=device-width, initial-scale=1.0" name="viewport">
	<title>Geia sou re migf1, alani!</title>

	<style type="text/css">
		.header {width:20%}
		.main {width:80%}
	</style>

</head>

<body>
	<div class="header">
		<h1>Header</h1>
	</div>

	<div class="main">
		<div>
			<img id='id-img' src="http://www.dscommunications.ca/wp-content/uploads/2012/11/responsive-design-example.jpg" width="100%"  />
		</div>
		<a href="#">Read more...</a>
	</div>

	<script type="text/javascript">
		function img_adjust( img ) {


	   var beholdItsTheNewHeight = window.innerWidth/3;

		img.style.height  = beholdItsTheNewHeight  + 'px';
		img.style.width = 'auto';

		}

		window.onload = window.onresize = function() {
			img_adjust( document.getElementById('id-img') );
		}
	</script>
</body>

</html>

Προφανως στη παρακατω γραμμη

 var beholdItsTheNewHeight = window.innerWidth/3;

μπορεις να αλλαξεις το /3 με /4 ή /2 ή οτι σε βολευει αναλογως.

Και φυσικα να πω οτι δεν περιεχετε max width εδω και οτι, το βασικοτερο, η εικονα δεν αλλιωνετε απο οποια μερια κ αν αυξομειωσεις τον browser.

Thanks και παλι migf1

EDIT

Μουφες! Αυτο το " η εικονα δεν αλλιωνετε απο οποια μερια κ αν αυξομειωσεις τον browser." δεν ισχυει απολυτα. Αν πιασεις τη κατω μερια και αρχισεις κ τη πηγαινεις πανω κατω, η εικονα δεν "ανταποκρινετε". Αλλα νομιζω οτι ειναι οκ, απο τη στιγμη που οι mobile κ tablet browsers ειναι "μακροστενοι"

migf1 · 14 Νοεμβρίου 2013

Για αυτό σε ρώτησα από την αρχή τι είδους συμπεριφορά θέλεις να δώσεις στη σελίδα σου. Οι html/css είναι φτιαγμένες να δουλεύουν κυρίως με πλάτη, οπότε δεν είναι και πολύ σοφό το να τα δουλεύουμε με βάση το ύψος (κυρίως διότι έχει ασυνεπή αποτελέσματα).

Ο κώδικας που σου έδωσα έκανε αυτό που ρώτησες στον τίτλο του θέματος και μου επιβεβαίωσες εκ νέου σε δεύτερο χρόνο... έχει δηλαδή σαν πρώτο σημείο αναφοράς το ύψος της εικόνας και σαν δεύτερο το πλάτος (με τα προβλήματα που συνεπάγεται κάτι τέτοιο).

Θα μου επιτρέψεις να επιμείνω πως είναι πολύ πιο σωστό να φροντίσεις να κάνεις feed το div με εικόνες στάνταρ αναλογιών, και ακόμα πιο σωστό να έχεις 3-4 παραλλαγές τους για κάθε συσκευή. Με αυτό τον τρόπο θα αρκεί ένα css: img {width:auto; max-width:100%} για όλες τις συσκευές.

Σύνδεση

div προσαρμοζει height αναλογα με το υψος οθονης

Προτεινόμενες αναρτήσεις

slevinkelevra

sougiasdj

migf1

slevinkelevra

migf1

slevinkelevra

migf1

Δημιουργήστε ένα λογαριασμό ή συνδεθείτε για να σχολιάσετε

Δημιουργία λογαριασμού

Σύνδεση

Σύνδεση