Images Responsive avec CSS
je trouve difficile de redimensionner les images pour les rendre plus sensibles.
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 wrapper à chaque image sur un site web et je peux très bien redimensionner les images.
mon problème réside dans les images qui sont naturellement plus petites que la fenêtre, comme les logos et les icônes. Je ne veux pas redimensionner ils.
Mon code actuellement convertit:
<img src="[src]" />
en:
<div class="erb-image-wrapper">
<img src="[src]" />
</div>
où j'utilise les CSS suivants:
.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;
}
ceci redimensionne toutes les images, mais je veux qu'il redimensionne seulement les images qui sont sur la largeur de la page. Est-ce que je peux y arriver via CSS?
7 réponses
.erb-image-wrapper img{
max-width:100% !important;
height:auto;
display:block;
}
a Fonctionné pour moi.
Merci à MrMisterMan pour son aide.
Utiliser max-width sur les images trop. Modifier:
.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;
}
vérifier les images d'abord avec php si elle est petite puis la taille standerd pour le logo donnez-lui une autre classe css et ne changez pas sa taille
je pense que vous avez à prendre de script entre
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 - @
max-width:700px{display:block; width:100%; clear:both}
et c'est pas absolue divs jamais; divs doit être de 100%, alors max-width: - desired width - à l'intérieur de recadrage. Un vrai site responsive a moins de 9 lignes de css n'importe quoi passé que vous êtes dans un monde de merde et des choses plus compliquées.
PS : reset.css les feuilles de style sont ce qui rend les stores css là logique, raison pour laquelle ils ont donné les styles par défaut en premier lieu.
le meilleur moyen que j'ai trouvé était de définir l'image que vous voulez voir de façon réactive comme une image de fond et envoyé une propriété css pour le div comme couverture.
background-image : url('YOUR URL');
background-size : cover
Utilisez max-width et auto height et affichez l'image en bloc comme suit:
image {
max-width:100%;
height: auto;
display:block;
}
corps
{ arrière-plan-image: url("http://media2.intoday.in/indiatoday/images/stories/vijay-story_647_062216110217.jpg"); arrière-plan-taille: 100vw 100vh; background-repeat: no-repeat; ; }
