web-dev-qa-db-fra.com

Images réactives avec CSS

Je trouve difficile de redimensionner les images pour les rendre réactives.

Je développe une application php pour convertir automatiquement un site web en une version responsive. Je suis un peu coincé sur les images.

J'ai ajouté avec succès une classe d'emballage à chaque image d'un site Web et je peux très bien redimensionner les images.

Mon problème réside dans les images naturellement plus petites que la fenêtre, telles que les logos et les icônes. Je ne veux pas redimensionner ceux-ci.

Mon code convertit actuellement:

<img src="[src]" />

dans:

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

Où j'utilise le 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;
}

Cela redimensionne toutes les images, mais je veux seulement redimensionner les images qui ont la largeur de la page. Est-ce que je peux y arriver via CSS?

cssimageresponsive-design
42
Dan Hanly
.erb-image-wrapper img{
    max-width:100% !important;
    height:auto;
    display:block;
}

Travaillé pour moi.
Merci pour MrMisterMan pour son aide.

86
Dan Hanly

Utilisez également max-width sur les images. Changement:

.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;
}
14
MrMisterMan

le meilleur moyen que j'ai trouvé était de définir l'image que vous souhaitez afficher en tant qu'image d'arrière-plan et d'envoyer une propriété CSS pour la div en couverture.

background-image : url('YOUR URL');
background-size : cover
0
Naseeruddin V N

vérifiez d'abord les images avec php si elles sont petites, puis la taille standard du logo .___. fournissez-lui une autre classe css sans changer sa taille

je pense que vous devez prendre des scripts entre 

0
Sahil Popli

um responsive est simple 

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

et c'est tout, pas d'absolue divs; divs doit être 100% puis max-width: - desired width - pour l'encadrement interne. Un vrai site réactif a moins de 9 lignes de css, rien n’est passé que vous soyez dans un monde de merde et de choses compliquées. 

PS: Les feuilles de style reset.css sont ce qui fait que les stores css ont une raison logique pour laquelle ils ont donné les styles par défaut. 

0
Ben Edwards