Les Images responsives avec CSS

Je suis de trouver qu'il est difficile de redimensionner les images pour les rendre sensibles.

Je suis de développement d'une application php pour convertir automatiquement un site web pour une version adaptable. Je suis un peu coincé sur les images.

J'ai ajouté avec succès une classe wrapper pour chaque image sur un site, et peut redimensionner les images assez bien.

Mon problème se trouve avec des images qui sont naturellement plus petit que la fenêtre, tels que les logos et les icônes. Je ne veux pas redimensionner ces.

Mon code actuellement convertit:

<img src="[src]" />

dans:

<div class="erb-image-wrapper">
    <img src="[src]" />
</div>

Où j'utilise le code CSS suivant:

.erb-image-wrapper{
    max-width:90%;
    height:auto;
    position: relative;
    display:block;
    margin:0 auto;
}
.erb-image-wrapper img{
    width:100% !important;
    height:100% !important;
    display:block;
}

Ce redimensionne toutes les images, mais je ne le veux pour redimensionner les images qui sont sur la largeur de la page. Est le moyen de parvenir via CSS?

InformationsquelleAutor Dan Hanly | 2012-07-31
  1. 86
    .erb-image-wrapper img{
    max-width:100% !important;
    height:auto;
    display:block;
}

    A fonctionné pour moi.

    Merci pour MrMisterMan pour son aide.

    • Utilisation display: inline-block; si votre conteneur de l'élément a text-align: center; et vous voulez que votre image soit centrée.
    InformationsquelleAutor Dan Hanly
  2. 14

    Utilisation max-width sur les images trop. Modification:

    .erb-image-wrapper img{
    width:100% !important;
    height:100% !important;
    display:block;
}

    à...

    .erb-image-wrapper img{
    max-width:100% !important;
    max-height:100% !important;
    display:block;
}
    • J'ai essayé cela, et cela fonctionne pour les images qui sont plus petits, mais ceux qui sont plus grandes sont écrasé, car il maintient la hauteur et redimensionne la largeur
    • Je l'ai essayé avec height:auto; à la place de max-height:100% et il fonctionne. Le coller dans votre réponse et je vais vous marque correcte.
    • Je n'étais pas au courant height:auto permettrait de résoudre le problème, donc il serait un peu de la triche pour le coller dans ma réponse! Vous pouvez répondre et accepter vos questions si vous trouvez la solution vous-même.
    • Juste pensé que, dans l'intérêt d'en aider d'autres qui se produisent sur la page. Votre solution m'amènent à découvrir la réponse exacte. Je vais prendre le crédit alors 😉
    • de crédit lorsque le crédit est dû. C'était un effort d'équipe.
    InformationsquelleAutor MrMisterMan
  3. 0

    vérifier les images d'abord avec php si il est petit, puis le standard de taille pour le logo
    fournir toute autre classe css et à ne pas modifier sa taille

    je pense que vous avez à prendre de script entre

    • J'essaie d'éviter beaucoup de traitement en php, essayant de le faire en CSS uniquement aidera beaucoup.
    • mais le css n'est pas pour les conditions de u ont à faire avec un script
    • J'ai terminé une solution avec CSS. Je pense que vous êtes en train de penser dans le script. Je peux mettre max-width sur une image et ça ne le redimensionner si elle est supérieure à la limite. De vérifier la upvoted réponse.
    InformationsquelleAutor Sahil Popli
  4. 0

    de messagerie unifiée réactif, c'est simple

    • tout d'abord créer une classe nommée cellule de lui donner la propriété de display:table-cell
    • puis @ max-width:700px ne {display:block; width:100%; clear:both}

    et que c'est pas absolue divs jamais; divs doit être de 100%, alors max-width: - desired width - à l'intérieur de recadrage. Un vrai de sites responsive a moins de 9 lignes de css rien passé que vous êtes dans un monde de merde et en plus de compliquer les choses.

    PS : reset.css les feuilles de style sont ce qui rend css stores il y avait une raison logique pourquoi ils ont donné des styles par défaut en premier lieu.

    InformationsquelleAutor Ben Edwards
  5. 0

    la meilleure façon que j'ai trouvée a été de définir l'image que vous souhaitez afficher rapidement comme une image d'arrière-plan et envoyé une propriété css de la div comme couverture.

    background-image : url('YOUR URL');
background-size : cover
    InformationsquelleAutor Naseeruddin V N
  6. -1

    Utilisation max-width:100%;, height: auto; et display:block; comme suit:

    image {
    max-width:100%;
    height: auto;
    display:block;
}
    InformationsquelleAutor Al3abMizo Games