Créer une balise <img> dépasser la balise <body> dans css

Je suis en train de développer une zone d'en-tête qui s'étend au-delà du conteneur 960px large habituel, sans utiliser d'image de fond, la raison en est qu'une balise <img> fonctionnerait mieux dans mon cas.Créer une balise <img> dépasser la balise <body> dans css

Mon problème est, si je place mon image dans le récipient, comme cet exemple de code:

<style> 
    #container { 
     width: 960px; 
     margin: 0 auto; 
    } 
</style> 
<div id="container"> 
    <img src="myimage.jpg" alt="my image" /> 
</div>

Je veux être en mesure de prendre cette image un centre il, à travers la page, l'expansion passé son conteneur à la fin de la fenêtre d'affichage, sans barres de défilement ajouté, supposons que la taille de l'image reste à une largeur constante de 1280px, mais la hauteur varie.

J'ai essayé ce matin, mais je ne pense pas que cela puisse être fait sans régler le débordement: caché sur l'étiquette du corps, ce qui est mauvais parce que je voudrais qu'il soit possible de faire défiler si la fenêtre est plus petit que le conteneur.

J'espère que vous les gars peuvent aider :)

Source

2010-06-22 studioromeo

Quel est le raisonnement pour l'utilisation '' au lieu d'une image de fond? –

Salut désolé pour la réponse tardive. la raison était d'essayer une autre méthode de faire la même tâche. Mon vieux solution consistait à utiliser un wrapper, avec l'image d'arrière-plan appliquée, puis à définir une largeur minimale de 960, de sorte que lors du redimensionnement, l'image de fond arrête d'essayer d'être à e centre à un point (si cela a du sens). Mon idée avec la balise était de répliquer cela, à l'origine j'espérais juste que ce serait un cas de marges négatives mais j'ai oublié l'aspect de débordement: \ Après avoir joué pendant un moment, j'ai pensé que je pourrais poster ici pour voir si quelqu'un d'autre a essayé de faire la même chose. – studioromeo

Vous avez raison, il ne fonctionne pas. Pourquoi doit-il être à l'intérieur du conteneur?

Vous pourriez le faire comme ceci.

<html> 
<head> 
<style> 
html, body{ 
width: 100%; 
height: 100%; 
margin: 0px; 
padding: 0px; 
text-align: center; 
} 
#header{ 
width: 2000px; 
float: left; 
overflow: hidden; 
} 
#container{ 
width: 960px; 
height: 500px; 
margin: 0 auto; 
overflow: hidden; 
} 
#page{ 
overflow: hidden; 
width: 100%; 
height: 100%; 
} 
</style> 
</head> 
<body> 
    <div id="page"> 
    <div id="header"> 
     <img src="myimage.jpg" alt="my image" /> 
    </div> 
<div id="container"> 
</div> 
    </div> 
</body> 
</html>

Source

2010-06-22 11:50:49

désolé lucas, pas de chance. – studioromeo

Merci beaucoup pour votre deuxième tentative :) Cela fonctionnerait je recon, mais je voudrais éviter de créer deux conteneurs, donc je reconnais que je vais rester avec mon approche d'image de fond d'origine :) Merci toujours pour votre soutien toutefois! :) +1 – studioromeo

Si le img doit être placé exactement à x-pos: 0 et Y-pos: 0, vous pouvez utiliser la position: absolute pour placèrent:

img#my_header{ 

position:absolute; // Tell the browser to break document work flow for this ID 

z-index:1; // Tell the browser to pull up in the stack this ID by 1 

top:0; // tell the browser to place this ID at 0px from top of view port 

left:0; // tell the browser to place this ID at 0px from left of view port 

}

Ceci est un exemple, pour vous donner une idée de qui vous pouvez casser le flux de documents pour placer votre balise img à l'endroit désiré ... en ajustant les coordonnées haut et à gauche, vous devriez le résoudre!

J'espère que ça aide!

Source

2010-06-22 11:53:26 Zuul

Merci pour votre réponse!J'ai essayé cela mais je n'ai pas eu de chance, mais les barres de défilement apparaissent toujours sur une grande image (disons 1280px) Je pense que je peux voir maintenant pourquoi nous utilisons des images d'arrière-plan à la place des tags img pour ce genre de chose – studioromeo

Ma pensée est similaire à celle de Lucas. Retirez le conteneur et placez-le dans son propre conteneur (id = "header" par exemple). Set #header à la largeur: 100% (ce qui devrait être la largeur de la fenêtre, et trop-plein:.. Caché Placez ensuite #header que vous voulez - utiliser la suggestion de Zuul de positionnement absolu si nécessaire

... 
<style type="text/css"> 
#header { width: 100%; overflow: hidden; margin: 0; } 
</style> 
... 
<div id="header"> 
    <img src="myimage.jpg" alt="My Image" /> 
</div> 
...

Je pense que devrait travailler pour vous.

Source

2010-06-22 16:05:24

Créer une balise <img> dépasser la balise <body> dans css

Répondre

Questions connexes