web-dev-qa-db-fra.com

Redimensionner automatiquement les images avec la taille du navigateur en utilisant CSS

Je veux que toutes (ou juste quelques-unes) de mes images soient automatiquement redimensionnées lorsque je redimensionne la fenêtre de mon navigateur. J'ai trouvé le code suivant - il ne fait rien cependant.

HTML

<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="utf-8" />
        <meta name="viewport" content="width=device-width, initial-scale=1.0" />
        <link rel="stylesheet" href="style.css" type="text/css" media="screen" />
    </head>
    <body>
        <div id="icons">
            <div id="contact">
                <img src="img/icon_contact.png" alt="" />
            </div>
            <img src="img/icon_links.png" alt="" />
        </div>
    </body>
</html>

CSS

body {
    font-family: Arial;
    font-size: 11px;
    color: #ffffff;
    background: #202020 url(../../img/body_back.jpg) no-repeat top center fixed;
    background-size: cover;
}

#icons {
    position: absolute;
    bottom: 22%;
    right: 8%;
    width: 400px;
    height: 80px;
    z-index: 8;
    transform: rotate(-57deg); 
    -ms-transform: rotate(-57deg); 
    -webkit-transform: rotate(-57deg); 
    -moz-transform: rotate(-57deg);
}

#contact { 
    float: left; 
    cursor: pointer; 
}


img { 
    max-width: 100%; 
    height: auto; 
}

Comment puis-je avoir une conception plein écran (avec background-size: cover) et des éléments div exactement à la même position (% sages) lors du redimensionnement de la fenêtre du navigateur, leur taille étant également redimensionnée (comme cover fait pour le fond)?

cssresizeresponsive-design
59
sigug

Pour rendre les images flexibles, ajoutez simplement max-width:100% et height:auto. Image max-width:100% et height:auto fonctionnent dans IE7, mais pas dans IE8 (oui, un autre bogue bizarre IE). Pour résoudre ce problème, vous devez ajouter width:auto\9 pour IE8.

source: http://webdesignerwall.com/tutorials/responsive-design-with-css3-media-queries

par exemple :

img {
    max-width: 100%;
    height: auto;
    width: auto\9; /* ie8 */
}

et toutes les images que vous ajoutez simplement en utilisant la balise img seront flexibles

Exemple JSFiddle ici. Aucun JavaScript n'est requis. Fonctionne dans les dernières versions de Chrome, Firefox et IE (qui est tout ce que j'ai testé).

138
Curtis Crewe

conteneur d'image

La mise à l'échelle d'images à l'aide de l'astuce ci-dessus ne fonctionne que si le conteneur dans lequel les images ont été modifiées est modifié.

Le conteneur #icons utilise les valeurs px pour la largeur et la hauteur. Les valeurs px ne sont pas mises à l'échelle lorsque le navigateur est redimensionné.

Solutions

Utilisez l’une des approches suivantes:

  1. Définissez la largeur et/ou la hauteur à l'aide des valeurs %.
  2. Utilisez une série de requêtes @media pour définir la largeur et la hauteur sur différentes valeurs en fonction de la taille d'écran actuelle.
3
Matt Coughlin

C’est peut-être une réponse trop simpliste (je suis encore nouveau ici), mais ce que j’ai fait par le passé pour remédier à cette situation est de déterminer le pourcentage de l’écran que je voudrais que l’image prenne. Par exemple, il y a une page Web sur laquelle je travaille où le logo doit occuper 30% de la taille de l'écran pour être plus beau. J'ai joué et finalement essayé ce code et il a fonctionné pour moi jusqu'à présent:

img {
width:30%;
height:auto;
}

Cela étant dit, cela changera toutes vos images pour qu'elles représentent 30% de la taille de l'écran à tout moment. Pour contourner ce problème, il vous suffit d’en faire une classe et de l’appliquer directement à l’image que vous souhaitez obtenir à 30%. Voici un exemple du code que j'ai écrit pour accomplir cela sur le site susmentionné:

la partie CSS:

.logo {
position:absolute;
right:25%;
top:0px;
width:30%;
height:auto;
}

la partie HTML:

<img src="logo_001_002.png" class="logo">

Alternativement, vous pouvez placer n'importe quelle image que vous souhaitez redimensionner automatiquement en une div et utiliser l'option de balise de classe sur chaque div (en créant maintenant des balises de classe chaque fois que nécessaire), mais je pense que cela entraînera éventuellement beaucoup de travail supplémentaire. Mais si le site le réclame, le site le réclame.

Espérons que cela aide. Passez une bonne journée!

1
Chad

Ce qui suit fonctionne sur tous les navigateurs pour mes 200 chiffres, quel que soit le pourcentage de largeur - bien qu’il soit illégal. Jukka dit: "Utilise-le quand même." (La classe fait simplement flotter l'image à gauche ou à droite et définit les marges.) Je ne peux pas imaginer pourquoi ce n'est pas l'approche standard!

<img class="fl" width="66%"
src="A-Images/0.5_Saltation.jpg"
alt="Schematic models of chromosomes ..." />

Changer la largeur de la fenêtre et l'image redimensionne obligatoirement.

0
Ferren