Conception de sites Web et redimensionnement d'images réactifs

Repsonsive de la conception web fonctionne très bien sur la plupart des éléments html extraits des images.Je trouve ça un gâchis. Lors d'un redimensionnement de fenêtres d'affichage, vous ne pouvez pas utiliser le redimensionnement des pourcentages sur une image, car il va prendre le parent de l'élément de la largeur et de la hauteur à droite. Vous devez définir des largeurs et hauteurs fixes pour les images...Ou alors j'ai loupé quelque chose?

Alors, comment fais-tu exactement une conception sensible impliquant des images dont l'élément conteneur parent va s'étirer au-dessus de ses natif de la largeur et de la diminuer en dessous de ses natif de la largeur?

Merci

source d'informationauteur Dexter Schneider

  1. 13

    Le fait chose en responsive design est de mettre ceci dans votre css pour les images et certains autres éléments:

    img, embed, object, video {
max-width:100%;
    height:auto;
}

    Puis dans le html, l'image prend simplement la taille de son conteneur.

    Vous ne définissez pas la taille de l'image elle-même vous venez de le laisser grandir/rétrécir lui-même.

  2. 2

    bien vous pouvez écrire: .sélecteur img{width: 100%; height: auto;} puis utilisez la taille de la div c'est en déterminer l'ampleur. ou vous pouvez également définir l'image comme arrière-plan et utiliser des méthodes similaires et peut-être même perdre avec background-size: cover. je vais faire un jsfiddle...

    .image-w img {
  display: block;
  width: 100%;
  height: auto;
}
  3. 0

    Ce que j'ai fait sur mon site est: est-ce

    page de trucs....

    div class=picr>

img src="/Images/Home/MountainPine.jpg" alt="Mountain Pine" id="mountainpine" >

<p>Caption about mountain pine</p>

/div>

    Ensuite dans le CSS

    pic, pic6 {
    float: left;
    }

...

.pic, .picr {
    width: 37%;
    }

#content  img {
    width: 100% ;
    }

    De sorte que le div de classe est de style, et l'image est définie pour le remplir. À l'aide de la div, alors je peux aussi le style

    au sein de la .pic classes distinctif du corps du texte.