J'utilise popups magnifiques ajax popup à créer une expérience de pop up quelque peu comme Instagram ou Facebook (image sur la gauche, les commentaires sur la droite, etc.). Comment puis-je continuer à définir une hauteur maximale pour toute la lumière de la lumière et centrez l'image quand elle peut être centrée verticalement? Cela doit fonctionner dans tous les navigateurs et doit être réactif qui est délicat. Je ne peux pas sembler le faire fonctionner correctement sur tous les navigateurs. Je suppose que je ne me dérange pas une solution de jQuery car c'est ce que je pourrais avoir besoin.
L'image et le contenu sont flottés comme tels: et le flotteur est juste Effacée avec la taille de l'écran est réduite à l'aide de requêtes multimédias. J'ai fait un jsfiddle pour aider à comprendre ce que j'essaie d'expliquer: Essayez de ré-dimensionnement de l'iframe pour vérifier l'effet.
4 Réponses :
Le meilleur moyen sera jQueryui redimensionner .
Si vous voulez que votre div (Le conteneur) changera par la taille de Windows que vous devriez faire somesing comme celle-ci:
Je pense que j'ai Éliminez les problèmes de compatibilité et définissez une hauteur maximale de 300PX, avec une solution de contournement pour IE6. p> JS: P> img {
width: 300px;
}
.view_container {
max-height:100%;
max-width: 850px;
_width:expression(this.scrollWidth > 850 ?"850px" :"auto");
/* sets max-width for IE6 */
margin: 20px auto;
background-color: #1C1C1C;
padding: 0;
line-height: 0;
border: 1px solid red;
}
.image_container, .content {
width: 50%;
float: left;
}
.image_container img {
max-height:300px;
_height:expression(this.scrollWidth > 300 ?"300px" :"auto");
/* sets max-width for IE6 */
max-width: 100%;
_width:expression(this.scrollWidth > 850 ?"850px" :"auto");
/* sets max-width for IE6 */
}
.image_container {
text-align: center;
}
.content1, .content2 {
background-color: #fff;
padding: 1em;
}
.content {
line-height: 1.231;
}
.content2 {
height: 300px;
overflow-y: scroll;
}
#small-dialog {
max-width: 850px;
_width:expression(this.scrollWidth > 850 ?"850px" :"auto");
/* sets max-width for IE6 */
margin: 20px auto;
background-color: #1C1C1C;
padding: 0;
line-height: 0;
border: 1px solid red;
}
@media (min-width: 1px) and (max-width: 638px) {
.image_container, .content {
width: auto;
float: none;
clear: both;
}
.image_container img {
max-height:150px;
max-width:150px;
_height:expression(this.scrollWidth > 150 ?"150px" :"auto");
/* sets max-width for IE6 */
_width:expression(this.scrollWidth > 150 ?"150px" :"auto");
/* sets max-width for IE6 */
}
}
Il y a un moyen de positionner un élément au milieu de la page en utilisant des transformations purement CSS3, telles que des fenêtres contextuelles et des boîtes modales.
N'oubliez pas tous les préfixes du fournisseur de navigateur (tels que
#myelem {largeur: 500px; Hauteur: 400px; Position: fixe; TOP: 50%; à gauche: 50%; Contexte: rouge; transformer: Traduire (-50%, -50%); }
-webkit - et -moz - ). N'oubliez pas non plus que les navigateurs plus anciens (IE9 ou ci-dessous) ne reconnaîtront pas transformer du tout. Vous aurez besoin d'un polyfill JavaScript pour eux.
0 commentaires
Je ne suis pas sûr que je comprenne toute la question, mais c'est comme ça que vous concentrez-vous verticalement et horizontalement images:
Démo : http://jsbin.com/ukowar/1/edit centrage via une position absolue en combinaison avec espère que cela aide à faire partie de votre problème. Marge: auto
Qu'est-ce que vous recherchez exactement qui n'a pas été répondu dans votre dernière question?
Une solution de navigateur croisée.
J'ai trouvé une solution de contournement pour max-hauteur / largeur pour IE6, je pense que cela fonctionnera pour vous voir la réponse mise à jour
Quel âge avez-vous les navigateurs que vous souhaitez soutenir? Sur quels navigateurs cela n'a-t-il pas fonctionné?