Center image στο resize [css]

[Xvipes]

Καλησπέρα,

δημιουργήθηκε η ανάγκη να υπάρχει μια εικόνα σε ένα div και όταν το παράθυρο γίνεται resize η εικόνα να παραμένει στο κέντρο του div και να κόβεται δεξιά και αριστερά.

 

Βάζοντας την εικόνα σαν background παίρνω το αποτέλεσμα που θέλω(παράδειγμα), για διάφορους λόγους όμως χρειάζομαι η εικόνα να είναι σε img tag.

 

Υπάρχει κάποια λύση ώστε η εικόνα να μην γίνεται resize στο πλάτος του παραθύρου αλλά να παραμένει στο κέντρο και να κόβεται δεξιά και αριστερά?

 

Δε με πειράζει να χρησιμοποιήσω και javascript αν χρειάζεται.

 

Ευχαριστώ για το χρόνο σας.

[alou]

Από όσο μπορώ να φανταστώ, μόνο με js γίνεται

 

http://jsfiddle.net/9cQLq/1/

 

Με την εικόνα κάπως έτσι:

	<figure class="wrapper">
        <img class="centered" src="http://www.archello.com/sites/default/files/imagecache/media_image/EFQueenStreet3.jpg">
	</figure>

και κάποιους βασικούς κανόνες css

figure.wrapper {width:100%;overflow:hidden;height:500px;margin:0;padding:0}
img.centered {max-height:100%;width:auto;}

θες κάτι τέτοιο:

function centerImg(element) {
  $(element).each(function(){
    var wrapwidth = $(this).parent().width();
    var lm = ($(this).width() - wrapwidth) / 2;
    $(this).css({'marginLeft': '-' + lm + 'px'});
  });  
}


$(window).on('resize', function(e){
    centerImg('.centered');     
});

[StathisG]

Το μόνο πράγμα που μπορώ να σκεφτώ με css είναι τελείως hack και δε μου αρέσει καθόλου: Να έχεις ένα img tag με ένα transparent pixel ως κανονικό image και μετά να χρησιμοποιήσεις ακριβώς την ίδια τεχνική που χρησιμοποίησες στο fiddle σου.

 

Αλλιώς, αφού πρέπει οπωσδήποτε να χρησιμοποιήσεις img tag (προσωπικά θα ενδιαφερόμουν να ακούσω το γιατί) κι εγώ με JS θα το έκανα. Χρησιμοποίησε την απάντηση του alou ή αυτό* σαν starting point και δες αν μπορείς να το βελτιστοποιήσεις με βάση τις ανάγκες σου.

 

*η ίδια λογική είναι, το είχα γράψει πριν δω την απάντηση του alou καθώς άργησα να επιστρέψω, οπότε το βάζω μόνο για να υπάρχει.

[Xvipes]

Ευχαριστώ πολύ και τους 2 για τις γρήγορες απαντήσεις, μου κάνει αυτό που δώσατε.

 

Στην αρχή το είχα έτσι όπως λες @StathisG 

<img src="images/spacer.png" style="background:url(http://www.archello.com/sites/default/files/imagecache/media_image/EFQueenStreet3.jpg) no-repeat top center;">

αλλά χρειάστηκε να χρησιμοποιήσω ένα Site: jquery plugin για να βάζω notes στις εικόνες και το plugin "πατάει" πάνω στο image tag.